前言：
在工作中，后台接口常常会有多套环境，多个host，什么正式环境，测试环境，xxx环境，你在工作中常常遇到的问题是：让你发一个某某环境的包，有的时候在同一个域名下可以使用location.hostname作为你的baseUrl也行，但是你本地调试又要改来该去，容易乱。
方案：
结合vue-cli的文档,我们可以在执行vue-cli-service的时候可以传一个mode参数，当你执行--mode xxx的时候，会去你的根目录上寻找.env.xxx文件，其中.env文件是在所有模式都加载的，然后你就可以写自己定义的变量。
注意：变量的名称得是：VUE_APP_*方式的，除此之外还有NODE_ENV和BASE_URL可以在程序代码中process.env.xxx可以访问到你需要用到的变量
我的代码实现：
package.json文件：
"serve:mytest": "vue-cli-service serve --mode mytest-dev",
"build:mytest": "vue-cli-service build --mode mytest-prod",
你可以新增更多，确保一一对应不然会默认development模式。
.env.mytest-prod
NODE_ENV=production
VUE_APP_HOST = http://1.1.1.1:4000
env.mytest-prod
NODE_ENV=development
VUE_APP_HOST = http://2.2.2.2:4000
注意：NODE_ENV最好是vue内置的三种值：development ，production，test,你定义环境变量为其他值的时候，需要你自己配置 webpack，不然没法分包加载优化。
api.js
// 以axios为例
import axios from 'axios'
const request = axios.create({
timeout: 60000,
baseURL: process.env.VUE_APP_HOST || '1.1.1.1:1111'
})
// 获取某个接口的时候
getData(params) {
return request.get('/path/', { params })
}
这样你调试的某个特定环境的时候可以执行npm run serve:mytest，
发版本npm run build:mytets就可以来，新增环境同样操作即可！
网友评论