一 、更新有什么
丰富的内置功能
（1）目的:减少了现代前端工具的配置上；在工具链中加入最佳实践
（2）核心目标：基于 webpack 4 构建的预配置提供构建设置，最大限度地减少开发人员配置的次数
（3）特点：
* 预配置 webpack 功能，例如模块热替换、代码拆分等；
* 可对 ES2017 进行转换和基于使用情况注入 polyfill，（babel 7 + preset-env）
* 支持 PostCSS（默认启用 autoprefixer）和所有主要的 CSS 预处理器
* Modern mode
* 多页面模式,构建具有多个 HTML / JS 入口点的应用程序
图形用户界面 (GUI）
vue ui
无需eject即可配置
构建项目时,通过安装 Vue CLI 运行时服务（@ vue / cli-service），选择功能插件，生成必要的配置文件即可
可扩展的插件系统
Instant Prototyping
二、分环境配置相关 vue.config.js
虽说项目创建搭起即可用，但在实际开发中，我们需要根据不同环境对应不同的配置。比如开发环境，测试环境，正式环境等。在vue-cli3的项目中，我们无法改变打包文件但又要区分环境，在度娘里也有很多方法可行
（一）
1.我们知道，
npm run serve时会把process.env.NODE_ENV设置为‘development’；
npm run build 时则会把process.env.NODE_ENV设置为‘production’；
2.既然这样，那就只要根据process.env.NODE_ENV设置为不同请求url就可以了
3.在package.json添加 vue-cli-service build --mode alpha
{
···
"scripts": {
"serve": "vue-cli-service serve", //本地运行，process.env.NODE_ENV设置为‘development’
"serve:alpha": "vue-cli-service serve --mode alpha", // 运行，根据项目环境运行对应的url
"build:alpha": "vue-cli-service build --mode alpha", // 打包，会把process.env.NODE_ENV设置为‘.env.alpha’文件设置的值。
// 注意，这里 “--mode 名字“ 要和文件名“.env.名字”名字保持一致
"build": "vue-cli-service build" //打包， 会把process.env.NODE_ENV设置为‘production’
},
"dependencies": {
···
},
···
}
4.然后在根目录下添加文件“.env.alpha”，内容为：
NODE_ENV = 'alpha'
5.这样在vue.congif.js是可以拿到这个自己定义的值
const env = process.env.NODE_ENV;
console.log(env); // 运行/打包都可以拿到alpha值，再根据这个值去匹配对应的url
这种以命令 --mode 名字的形式，npm run build:alpha即可以打测试环境包，npm run build则打生产包
我一开始也是如此去根据--mode 名字的形式去写不同环境，后来发现这样运行和打包出来是有差异的。
通过改变process.env.NODE_ENV值区分运行/打包环境，webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样。
（二）
在（一）的基础上，不改变process.env.NODE_ENV的值，生成和开发分别还是production/development
1.在项目的根目录下添加对应文件“.env.alpha”“.env.build”，内容分别是
NODE_ENV = 'production'
VUE_APP_HOST = 'alpha'
NODE_ENV = 'production'
VUE_APP_HOST = 'production'
在项目中通过 process.env.VUE_APP_HOST可以拿到对应的值。这种以VUE_APP_xx开头的可以设定为全局变量
如果当前开发时，你只需运行一个环境，打包两种环境包。这样写还是可以配置的。
如果是三个以上环境或是运行也区分环境，就需要添加较多文件，就不建议如此(哈哈我是这么觉得滴)
（三）运行为不同环境，打包也为不同环境区分
1.package.json添加“vue-cli-service serve env=mock”"vue-cli-service serve env=alpha"
{
···
"scripts": {
"serve": "vue-cli-service serve", //本地运行，process.env.NODE_ENV设置为‘development’
"serve:mock": "vue-cli-service serve env=mock",
"serve:alpha": "vue-cli-service serve env=alpha",
"build:alpha": "vue-cli-service build env=alpha",
"build": "vue-cli-service build" //打包， 会把process.env.NODE_ENV设置为‘production’
},
"dependencies": {
···
},
···
}
2.vue.config.js中通过 process.argv 去获取参数
const index = process.argv.length - 1;
process.env.VUE_APP_HOST_ENV = process.argv[index].split("=")[1];
console.log('--', process.env.VUE_APP_HOST_ENV);
终端：
3.在constant.ts或是自己需要的地方暴露一下这个变量
export const API_ENV = process.env.VUE_APP_HOST_ENV;
4.完。继续撸码
不足之处，请多多多多多多指教:)
