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'
使用:
结果: