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 開發(fā) || production 生產(chǎn)
// 開發(fā) vue-cli-service serve --mode dev console =》 process.env.BABEL_ENV development
// 生產(chǎn) 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);
// 開發(fā) vue-cli-service serve --mode dev console =》 process.env.NODE_ENV development
// 生產(chǎn) 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);
// 開發(fā) vue-cli-service serve --mode dev console =》 process.env.VUE_APP_TITLE undefined
// 生產(chǎn) 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);