1.创建环境env文件
| 文件 | 说明 | 备注 |
| .env | vue-cli-service build 时 , 默认的配置 | 默认的 npm run build = vue-cli-service build |
| .env.development | vue-cli-service serve 时 ,默认的配置 | 默认的 npm run serve = vue-cli-service serve |
| .env.{mode} | 下文以mode = dev为例 |
.env文件中变量命名 必须以 VUE_APP_ 开头
例子(.env.dev) :
VUE_APP_DATA_TEST=TRUE VUE_APP_REQUEST_URL=‘/api‘ VUE_APP_REQUEST_DEMO=‘http://172.18.0.95:8073‘
2.修改package.json
增加dev的配置 ,如下 ,增加配置dev , 注意后面带了个参数 --mode dev
这个mode,对应环境变量文件中的{mode}
"scripts": {
"serve": "vue-cli-service serve --open",
"dev": "vue-cli-service serve --open --mode dev",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
3.vue.config.js中引用环境变量
如下例子 , 可以使用 process.env.VUE_APP_REQUEST_DEMO 来访问环境变量中的值
module.exports = {
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: ‘8080‘,
https: false,
hotOnly: false,
proxy: {
‘/api‘: {
target: process.env.VUE_APP_REQUEST_DEMO,
ws: true, //代理websockets
pathRewrite: {
‘^/api‘: ‘‘ // remove base path
},
changeOrigin: true
}
}
}
};
如上配置 , 便可执行下面的命令 :
#执行开发环境 npm run dev
原文：https://www.cnblogs.com/jerome92/p/13728622.html