惯例操作
批改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.modeconsole.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 : './'};不晓得这样配置环境变量是不是舒服一些？欢送小伙伴留下贵重的意见和倡议！
我的项目中使用
和惯例用法一样