vue-cli3.0移除了配置文件目录&＃xff1a; config和build文件夹。可以说是非常的精简了&＃xff0c;那移除了配置文件目录后如何自定义配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中&＃xff0c;一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境&＃xff0c;然后才能正式的发布。对应每一个环境可能都会有所差异&＃xff0c;比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候&＃xff0c;就需要不同的配置参数&＃xff0c;所以就可以用环境变量和模式&＃xff0c;来方便我们管理。

process.env环境变量

cli-3.0总共提供了四种方式来制定环境变量&＃xff1a;
    在根目录添加.env文件&＃xff0c;配置所有情况下都会用到的配置&＃xff08;不知道这个存在的意义&＃xff0c;所有的都需要的也就不需要配置了吧&＃xff09;。
    在根目录添加.env.local 文件&＃xff0c;配置所有情况下都会用到的配置&＃xff0c;与.env的区别是只会在本地&＃xff0c;该文件不会被git跟踪。
    在根目录添加.env.[mode] 文件&＃xff0c;配置对应某个模式下的配置,比如&＃xff1a;.env.development来配置开发环境的配置。
    在根目录添加.env.[mode].local文件&＃xff0c;配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效&＃xff0c;该文件不会被git跟踪。
    在文件中&＃xff0c;我们只需要以key&＃61;value的方式就可以设置变量了

例如

FOO&＃61;bar
VUE_APP_SECRET&＃61;secret
环境变量的使用

设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用&＃xff0c;限制也不一样。
在项目中&＃xff0c;也就是src中使用环境变量的话&＃xff0c;必须以VUE_APP_开头。例如我们可以在main.js中直接输出&＃xff1a;console.log(process.env.VUE_APP_SECRET)
在webpack配置中使用&＃xff0c;没什么限制&＃xff0c;可以直接通过process.env.XXX来使用
在public/index.html中使用的&＃xff1a;分三类&＃xff1a;&＃xff08;没怎么用过&＃xff09;

<%&＃61; VAR %> 用于非转换插值 例如&＃xff1a;&＃96;favicon.ico">&＃96;
<%- VAR %> 用于HTML转义插值
<% expression %> 用于Javascript控制流

模式

模式是Vue CLI项目中的一个重要概念。默认情况下&＃xff0c;Vue CLI项目中有三种模式&＃xff1a;
development&＃xff1a;在vue-cli-service serve下&＃xff0c;即开发环境使用
production&＃xff1a;在vue-cli-service build 和vue-cli-service test:e2e下&＃xff0c;即正式环境使用
test&＃xff1a; 在vue-cli-service test:unit下使用

另外&＃xff0c;如果你想要修改模式下默认的环境变量的话可以通过--mode来实现
"dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了&＃xff0c;为什么需要有模式的存在&＃xff0c;这里我没查到详细的文档&＃xff0c;个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同&＃xff0c;在development自动注入devtoolPlugin插件&＃xff0c;利于开发&＃xff0c;而在production中检测到错误不会进行console。

---

上手操作

package.json

.env.development 是开发环境下的配置文件
.env.production 是生产环境下的配置文件
如果这两个文件是空的&＃xff0c;那么运行 npm run serve 时&＃xff0c;process.env.NODE_ENV 的值默认就是 development&＃xff1b;运行 npm run build 时&＃xff0c;process.env.NODE_ENV 的值默认就是 production&＃xff1b;

{"scripts": {"serve": "vue-cli-service serve",//默认就是 development开发环境"build": "vue-cli-service build",//默认就是 production生产环境"lint": "vue-cli-service lint","serve:dev": "vue-cli-service serve --mode dev","serve:prod": "vue-cli-service serve --mode prod","serve:beta": "vue-cli-service serve --mode beta","build:dev": "vue-cli-service build --mode devbuild","build:prod": "vue-cli-service build --mode prodbuild","build:beta": "vue-cli-service build --mode betabuild"},
}

添加文件

//.env.beta文件
NODE_ENV &＃61; &＃39;beta&＃39;
VUE_APP_NODE_ENV &＃61; &＃39;beta&＃39;//.env.betabuild文件
VUE_APP_NODE_ENV &＃61; &＃39;beta&＃39;
NODE_ENV &＃61; &＃39;production&＃39;
outputDir &＃61; &＃39;betabuild&＃39; //输出文件名
&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
//.env.dev文件
NODE_ENV &＃61; &＃39;dev&＃39;
VUE_APP_NODE_ENV &＃61; &＃39;dev&＃39;//.env.devbuild文件
VUE_APP_NODE_ENV &＃61; &＃39;dev&＃39;
NODE_ENV &＃61; &＃39;production&＃39;
outputDir &＃61; &＃39;devbuild&＃39;
&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
//.env.prod文件
NODE_ENV &＃61; &＃39;production&＃39;
VUE_APP_NODE_ENV &＃61; &＃39;production&＃39;//.env.prodbuild文件
VUE_APP_NODE_ENV &＃61; &＃39;prod&＃39;
NODE_ENV &＃61; &＃39;production&＃39;
outputDir &＃61; &＃39;prodbuild&＃39;

这里声明的NODE_ENV &＃61;&＃39;production&＃39;用来表示这是生产环境。VUE_APP_NODE_ENV为项目变量&＃xff0c;outputDir为除数打包后文件的地址(默认打包输出地址dist)。

在vue.config.js中使用环境变量&＃xff0c;制定输出文件为环境变量配置的文件

module.exports &＃61; {//根据环境build打包到对于路径outputDir : process.env.outputDir,
}
使用

 .gitignore

增加忽略文件

/prodbuild
/devbuild
/betabuild

.DS_Store
node_modules
/dist
/prodbuild
/devbuild
/betabuild# local env files
.env.local
.env.*.local# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

打包