1.在项目根目录, 注意是项目根目录, 跟vue.config.js、src文件夹同级。
新建文件: .env.production
NODE_ENV = "production"
VUE_APP_TITLE = "productionVUE_APP_TITLE"
和文件: .env.test
NODE_ENV = "production"
VUE_APP_TITLE = "testVUE_APP_TITLE"
2.在package.json文件中修改命令配置
{
...
"scripts": {
"serve": "vue-cli-service serve --mode serve",
"dev": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode production",
"test": "vue-cli-service build --mode test"
},
...
}
以上配置完成后
可以在整个项目中获取到以下变量(几乎所有地方)
console.log('process.env.npm_lifecycle_event', process.env.npm_lifecycle_event);
console.log('process.env.npm_config_argv', process.env.npm_config_argv);
// console.log(process.env.BABEL_ENV); // development 开发 || production 生产
// 开发 vue-cli-service serve --mode dev console =》 process.env.BABEL_ENV development
// 生产 vue-cli-service build --mode production console =》 process.env.BABEL_ENV production
// 测试 vue-cli-service build --mode test console =》 process.env.BABEL_ENV test
console.log('process.env.BABEL_ENV', process.env.BABEL_ENV);
// 开发 vue-cli-service serve --mode dev console =》 process.env.NODE_ENV development
// 生产 vue-cli-service build --mode production console =》 process.env.NODE_ENV production
// 测试 vue-cli-service test --mode test console =》 process.env.NODE_ENV test
console.log('process.env.NODE_ENV', process.env.NODE_ENV);
// 开发 vue-cli-service serve --mode dev console =》 process.env.VUE_APP_TITLE undefined
// 生产 vue-cli-service build --mode production console =》 process.env.VUE_APP_TITLE productionVUE_APP_TITLE
// 测试 vue-cli-service test --mode test console =》 process.env.VUE_APP_TITLE testVUE_APP_TITLE
console.log('process.env.VUE_APP_TITLE', process.env.VUE_APP_TITLE);