【Vue】vue-cli3多环境配置

前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题

本篇介绍使用配置文件.env.xxx的方式实现多环境打包

一、首先先安装vue-cli3

npm install -g @vue/cli

然后使用vue --version查看当前版本，如下图所示：

vue版本

二、配置多环境文件

1. 配置package.json文件

打开package.json文件，如下图所示

package.json

其中scripts中的内容，就是运行、打包时配置的命令

2. 配置环境

在scripts中新增一条键值对

"serve01": "vue-cli-service serve --mode serve_01",

键：环境名，在运行命令的时候使用，如：npm run serve01就是执行该键所对应的值命令
值：vue-cli-service命令；serve表示是运行还是打包，serve表示是编译运行，build则是进行打包；--mode serve_01表示环境的模式名字，在创建配置文件的时候作为区分。

上述命令则是新建一个运行环境，模式名字为serve_01的环境。

3. 新建该环境的配置文件

新建一个文件名为.env.serve_01的文件，其中文件的serve_01对应的就是scripts中serve01环境的--mode值。

文件.env.serve_01中配置如下：

NODE_ENV='dev'
VUE_APP_BASE_SERVER='serve00001这是运行环境呀'
VUE_NAME='我的名字名字'

配置文件中变量注意事项

• NODE_ENV：每个环境都存在的变量，在代码中用于区分当前的运行环境，默认如果不写时，serve命令下的NODE_ENV值为development，build命令下的NODE_ENV值为production。如果复写了此变量，则会使用复写的值。调用方法process.env.NODE_ENV
• 变量命名：只有以 VUE_APP_开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。其他的命名则访问不到！调用方法process.env.VUE_APP_XXX。

目录结构

4. 运行测试

运行npm run serve01

调用

调用

结果

结果

可以看到，NODE_ENV被复写了，非VUE_APP_开头的变量不会被编译加载出来。

三、其他

打包模式该如何配置？打包到不同的文件夹又怎么配置？

问题不大

一行命令和一个配置文件就能轻松搞定

1. scripts命令："build01": "vue-cli-service build --mode build_01 --dest build01"。
   解析：一个build01的打包(build)命令，模式为build_01(表示配置文件的模式名字也为build_01)，打包输出到build01文件夹中（--dest则表示打包输出的文件夹名字）

2. env配置文件（文件名：.env.build_01）

    NODE_ENV='pro'
    VUE_APP_BASE_SERVER='这是生产环境001'
   

3. 测试运行

   
   
   测试结果
   
   

   可以看到，测试没有问题

这样就很轻松的解决了以上问题！是不是很开心~

参考资料

环境变量和模式：https://cli.vuejs.org/zh/guide/mode-and-env.html