vue-cli3更新有什么及分环境配置相关

一 、更新有什么

丰富的内置功能

（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-cli3文档

二、分环境配置相关 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);

终端：

image.png

3.在constant.ts或是自己需要的地方暴露一下这个变量

export const API_ENV = process.env.VUE_APP_HOST_ENV;

4.完。继续撸码

不足之处，请多多多多多多指教:)

参考一