vue-cli3 配置多环境打包

首先我们先看看 vue-cli环境变量和模式，通过官网我们可以发现 vue-cli 提供了三个模式（test、development、production）而每种NODE_ENV下面可以配置多个环境变量。
我们可以通过.env文件增加后缀来设置某个模式下特有的环境变量。
我们可以通过传递 --mode选项参数为命令覆写默认的模式，使用自己的环境变量。

1.新建.env文件

格式新建.env.加名称。
列：.env.dev（本地环境）.env.test（测试环境）.env.build（线上环境）

2. env文件配置

//.env.dev文件
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'

//.env.test文件
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'

//.env.build文件
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'build'
VUE_APP_BASEURL = '正式环境api地址'

3.配置package.json

在package.json下scripts里配置不同环境对应变量，这里 需要注意的 是 --model 后面的参数 需要是 .env.[model] 文件 对应的 [model]

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
	"test": "vue-cli-service build --mode test",
	"build": "vue-cli-service build --mode build",
    "lint": "vue-cli-service lint"
},

4.打包后名称配置

vue-cli3.0致力于Vue生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你就可以专注在撰写应用上，减少配置的时间。查看如下文件，会发现相比于vue-cli2.0少了build与config文件夹，所以vue-cli3提供了一个可选的配置文件 ——vue.config.js。
新建一个vue.config.js文件，outputDir为发布包的名称配置。

module.exports = {
	outputDir:"name"//打包后的项目目录名称
}

5.在客户端侧代码中使用环境变量

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 "secret"。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
(1).NODE_ENV 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
(2).BASE_URL 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

6.只在本地有效的变量

有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。

.local 也可以加在指定模式的环境文件上，比如 .env.development.local 将会在 development 模式下被载入，且被 git 忽略。

希望这篇文章对大家用所帮助，如果以上流程有不对或者更好的方式处理，欢迎留言，大家互相学习。