vue-cli4环境变量配置和代理跨域配置
环境变量配置
跨域代理配置
总结
参考内容
环境变量配置
官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

在项目根目录中新建.env, .env.production, .env.pre 等文件

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

一个环境文件只包含环境变量的“键=值”对:

    .env                # 在所有的环境中被载入
    .env.local          # 在所有的环境中被载入，但会被 git 忽略
    .env.[mode]         # 只在指定的模式中被载入
    .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

.env npm run serve 默认的本地开发环境配置
// 默认的本地开发环境配置 每行后面不要加结束分号

    NODE_ENV = "development"

    BASE_URL = "./"

    // 打包后文件夹名字;默认dist;要在vue.config.js 中配置
    // 只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE_APP_BASE_API 访问 这样定义的值
    // 在  vue.config.js 中可以获取到 outputDir ,但是在客户端代码中无法获取;
    outputDir = "dist"

    VUE_APP_API = "http://v.juhe.cn/joke"

.env.production npm run build 默认的环境配置（正式服务器）
// build 默认的环境配置（正式服务器）每行后面不要加结束分号

    NODE_ENV = "production"

    BASE_RUL = "./"

    // 打包后文件夹名字;要在vue.config.js 中配置
    outputDir = "dist_pro"

    // 自定义的一些在客户端要获取的变量要以 VUE_APP_  开头 不然无法获取到;
    VUE_APP_OUT_PUTDIR = "dist_pro"

    VUE_APP_API = "http://www.xxxx.com/api"

.env.pre npm run pre 自定义 build 环境配置（预发服务器）
//自定义 build 环境配置（预发服务器）每行后面不要加结束分号

NODE_ENV = "production"

BASE_URL = "./"

// 打包后文件夹名字; 要在vue.config.js 中配置
outputDir = "dist_pre"

VUE_APP_API = "http://www.自定义环境.com"  

package.json 一个模式有多中变量;
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“pre”: “vue-cli-service build --mode pre”
}
注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：
“dev-build”: “vue-cli-service build --mode development”,

index.vue
// index.vue 获取最新的笑话
axios.get("/api/content/text.php",
{ baseURL:process.env.NODE_ENV==“development”?’/’:process.env.VUE_APP_API,
params:{key:‘19a578542216aeb8a23ccf5b05a61449’},
headers:{‘Content-Type’:‘application/json;charset=UTF-8’}
})
.then(res=>{
console.log(‘text result’,res);
})
http.js
// axios 封装,(示例demo 所以参数写死的);
// 本地开发环境的话要使用 devServer 代理来跨域 所以 “development” 时 baseURL 设置为 “/”;
app.ajax = (url,method)=>{
return axios({
url:url,
baseURL:process.env.NODE_ENV==“development”?’/’:process.env.VUE_APP_API,
method:method,
params:{
key:‘19a578542216aeb8a23ccf5b05a61449’
},

   data:{
       sort:'desc',
       page:1,
       pagesize:10,
       time:parseInt( new Date().getTime()/1000),
       key:'19a578542216aeb8a23ccf5b05a61449'
   },
   headers:{'Content-Type':'application/json;charset=UTF-8'},

})
}

export default app;

跨域代理配置
本地开发时会涉及到跨域问题;至于在服务端 请加跨域请求头

vue.config.js devServer 配置

module.exports = {
outputDir:process.env.outputDir || ‘dist’,

// 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
devServer:{
    open:false,      // 是否打开浏览器;
    hotOnly:true,    // 是否热更新;

    proxy:{
        '/api':{   // 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可
            target:'http://v.juhe.cn/joke',    // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
            secure:false,
            changeOrigin:true,  // 开启代理，在本地创建一个虚拟服务端
            ws:true,       // 是否启用  websockets;
            pathRewrite:{   // 去掉 路径中的  /api  的这一截
                '^/api':''
            }
        },

        '/test':{
            target:'http://v.juhe.cn/joke',   // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
            secure:false,
            changeOrigin:true,
            ws:true,
            pathRewrite:{
                '^/test':'',
            }
        }
    
    },

}

}

总结
代理配置 时 配置的主机地址 （即 baseURL） 应该为 “/”; 参考 http.js
真时的地址为 在 vue.config.js 中配置; 参考 vue.config.js 中 devServer 配置项

参考内容
https://segmentfault.com/q/1010000022185695
https://cli.vuejs.org/zh/guide/mode-and-env.html#模式
https://github.com/chimurai/http-proxy-middleware