在vue项目中,如果用到了环境变量,一般是在vue.config.js同级目录下放置两个环境变量文件,.env 和 .env.development。
    image.png
    其中.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。