vue .env文件

1、vue中的.env文件为环境变量配置文件，在package.json文件中配置在执行命令时对应到配置文件

2、文件类型(与package.json同个目录下)

        .env —— 全局默认配置文件，不管什么环境都会加载

        .env.dev —— 开发环境下的配置文件

        .env.pro —— 生产环境下的配置文件

        .env.local —— 本地运行下的配置文件

 

3、执行顺序

        先 .env ——> .env.dev/pro/local，两个文件中加载了同样的项时会由后加载的覆盖先加载的

4、文件内容包括：

        NODE_ENV 代表是环境，用于package.json

        自定义属性：属性名必须以"VUE_APP_"开头，比如VUE_APP_XXX（“VUE_APP_”是规定的环境变量名前缀，如果变量名不是以此开头，则在程序中不能调用此环境变量）

// 环境标记 package.json用
VUE_APP_MODE = 'prod'
NODE_ENV = 'production'
VUE_APP_BASE_URL = ''
VUE_APP_TEXT = '生产环境'

5、在package.json定义执行命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service serve --mode dev --open",
    "prod": "vue-cli-service serve --mode prod --open",
    "local": "vue-cli-service serve --mode local --open"
  },

6、获取

        process.env.VUE_APP_XXX

使用：

getEnv(){
    console.log(process.env.VUE_APP_TEXT)
},

结果：

   

7、全局配置

       a、 main.js中 Vue.prototype.$env= process.env （$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。）

        使用：this.$env 或 Vue.prototype.$env

main.js：

使用：

  

结果：

        b、config/index.js中window._CONFIG=process.env，然后main.js里面引入config/index.js文件

        使用：window._CONFIG

config/index.js：

 

main.js引入：

import window from '../config/index.js'

 使用：

结果：