共计 1265 个字符,预计需要花费 4 分钟才能阅读完成。
惯例操作
批改 package.json
通过 vue-cli-service –mode local 来指定是哪个运行环境
"scripts": {
"serve-local": "vue-cli-service serve --port 8806 --mode local",
"serve-dev": "vue-cli-service serve --port 8806 --mode development",
"serve-prod": "vue-cli-service serve --port 8806 --mode production",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
增加.env 文件
为每个 mode 新建一个 .env.[mode]
的文件,值 env 文件外面指定变量,
VUE_APP_SERVER_URL = "localUrl"
....
我的项目中使用
比方在 config.js 中导入环境变量
export const SERVICE_URL = process.env.VUE_APP_SERVICE_URL;
问题
- 每个 mode 都对应一个 env 文件,local,dev,prod 三种模式就是 3 个文件,如果再还有别的测试服务器还的再加文件,且还是在根目录增加,是不是感觉不太舒服呢
- 小我的项目要增加的环境变量并不多,最根本的 3 个环境配置下来感觉多出好多文件
- env 文件都是文本显示,不易浏览和批改
骚操作解决办法
批改 package.json
和惯例操作一样
批改 vue.config.js
通过 process.VUE_CLI_SERVICE.mode
来获取 –mode 的传值,依据 mode 值来通过 js 的办法来设置环境变量。如果配置环境变量只写到 vue.config.js 文件下不优雅,小伙伴能够自行通过 js 的形式来组织环境变量的文件,欢送小伙伴触类旁通
const mode = process.VUE_CLI_SERVICE.mode
console.log("mode=", mode);
if(mode == "local"){
process.env.VUE_APP_SERVICE_URL = "localUrl"
process.env.VUE_APP_PLATFORM = "/same"
}else if(mode == "development"){process.env.VUE_APP_SERVICE_URL = devUrl"process.env.VUE_APP_PLATFORM ="/same"}else if(mode =="production"){
process.env.VUE_APP_SERVICE_URL = "prodUrl"
process.env.VUE_APP_PLATFORM = "/same"
}
module.exports = {publicPath : './'};
不晓得这样配置环境变量是不是舒服一些?欢送小伙伴留下贵重的意见和倡议!
我的项目中使用
和惯例用法一样
如果您感到有帮忙请发请点赞
正文完