vue中的.env文件

• .env: 全局默认配置文件，不论什么环境都会加载合并
• .env.development: 开发环境下的配置文件
• .env.production: 生产环境下的配置文件
• 注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的 比如执行npm run serve命令，会自动加载.env.development文件

应用场景:

比如你本地开发时，使用了vue.config.js的proxy代理 API；上线后需要用到实际接口：

• 开发环境

  1. env.developmen

     # .env.development
     NODE_ENV="development"
     
     VUE_APP_API='/api'
     

  2. vue.config.js

     module.exports = {
         devServer: {
             proxy: {
                 "/api": "http://xxx.xxx.xxx.xxx/api",
                 // ...
             }
         }
     }
     

• 生产环境

  • .env.production

    # .env.production
    NODE_ENV="production"
    
    VUE_APP_API='http://xxx.xxx.xxx.xxx/api'
    

启动配置

• 在package.json中配置scripts

  1. 本地运行，使用开发环境变量

     "serve": "vue-cli-service serve --mode development"
     

  2. 本地运行，使用线上环境变量

     "serve:pro": "vue-cli-service serve --mode production"
     

  3. 打包，使用开发环境变量

     "build": "vue-cli-service build --mode development"
     

  4. 打包，使用线上环境变量

     "build:pro": "vue-cli-service build --mode production"
     

  5. 项目中使用

     const {VUE_APP_API} = process.env
     console.log(VUE_APP_API) // 会根据你处于哪个环境去加载