在vue项目中,如果用到了环境变量,一般是在vue.config.js同级目录下放置两个环境变量文件,.env 和 .env.development。
其中.env对应production环境,.env.development对应development环境。
在vue的默认配置中 npm run serve 默认环境变量NODE_ENV 是“development”,因此会加载.env.development中的环境变量。
而 npm run build 默认环境变量NODE_ENV 是 “production”,因此会加载.env中的环境变量。
注意一个特殊的情况,环境变量.env文件(包括.env和.env.development以及其他.env文件)中的变量BASE_URL会被vue.config.js中 publicPath变量覆盖。
举例如下:
// .env
BASE_URL=’release/’
APP_BASE_URL=’app/release/’
// vue.config.js
module.exports = {
publicPath: ‘public/’
}
运行前端项目,打印BASE_URL和APP_BASE_URL
// main.js
console.log(process.env.BASE_URL) // ‘public/’ (被publicPath覆盖)
console.log(process.env.APP_BASE_URL) // ‘app/release/’
因此如果需要在根据环境不同分别自定义url(如用作axios的baseUrl) 就不要使用BASE_URL这个变量名,改用其他变量名如APP_BASE_URL。