Vue无法访问.env.development定义的变量值问题及解决
作者：longzhoufeng
这篇文章主要介绍了Vue无法访问.env.development定义的变量值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue无法访问.env.development定义的变量值
在.env.development定义变量时，发现获取不取值。
比方：原来的定义的一个变量，是可以访问的
VUE_APP_BASE_API = '/dev-api'
上面的是可以访问的
后来发现有多个接口，需要调用不同地址访问，就需要配置多个代理服务器的IP，我自己又定义了一个服务器地址：APP_DEV_USER_API = ‘/devApi’
输出是：undefined
后来翻看官方文档发现定义变量必须以：VUE_APP_XXXX 开头
VUE_APP_PRO_API = '/proApi'
vue中.env | .env.development | .env.production使用
.env——全局默认配置文件，无论什么环境都会加载合并.env.development——开发环境下的配置文件.env.production——生产环境下的配置文件
注意：属性名必须以VUE_APP_开头，比如VUE_APP_xxx = "变量"
首先在跟目录创建三个文件
分别是.env.development、.env.production、.env.staging三个文件
# 页面标题 VUE_APP_TITLE = 若依管理系统 // .env.development文件里编写，NODE_ENV default is development # 开发环境配置 ENV = 'development' # 若依管理系统/开发环境 VUE_APP_BASE_API = '/dev-api' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 页面标题 VUE_APP_TITLE = 若依管理系统 # 生产环境配置 ENV = 'production' # 若依管理系统/生产环境 VUE_APP_BASE_API = '/prod-api' // .env.production文件里编写 NODE_ENV default is production
# 页面标题 VUE_APP_TITLE = 若依管理系统 NODE_ENV = production # 测试环境配置 ENV = 'staging' # 若依管理系统/测试环境 VUE_APP_BASE_API = '/stage-api'
vue-cli-service build 自定义参数
vue-cli-service build
（1）**作用：**是打包资源文件
（2）**工具：**通过脚手架依赖的dotenv模块实现参数定义和读取
（3）**原理：**detenv作用是将环境变量从.env文件加载到process.env中，代码就可以通过process.env.VUE_APP_XX访问自定义的VUE_APP_XX的值了
在vue-cli-service的packjson中切换环境
(1) 在运行时如果需要区分生产环境和测试环境，只需要
“scriptes”: {
“serve”: “vue-cli-service serve”, // 会将process.env.NODE_ENV设置为development
“build”: “vue-cli-service build” // 会将process.env.NODE_ENV设置为production
}(2)在build时在dist/目录会有用于生产环境的包，需要添加选项–mode区分测试环境和生产环境
“scripts”: {
“build:test”: “vue-cli-service build --mode test”, // 测试环境
“build:prod”: “vue-cli-service build --mode prod”, // 生产环境
},"build:dev": "vue-cli-service build --mode dev", // 打包开发环境 "build:test": "vue-cli-service build --mode test", // 打包集成测试 "build:uat": "vue-cli-service build --mode uat", // 打包验收测试 "build:prod": "vue-cli-service build --mode prod", // 打包生产环境
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。