一 、更新有什么

豐富的內(nèi)置功能

（1）目的:減少了現(xiàn)代前端工具的配置上；在工具鏈中加入最佳實(shí)踐
（2）核心目標(biāo)：基于 webpack 4 構(gòu)建的預(yù)配置提供構(gòu)建設(shè)置，最大限度地減少開發(fā)人員配置的次數(shù)
（3）特點(diǎn)：
* 預(yù)配置 webpack 功能，例如模塊熱替換、代碼拆分等；
* 可對(duì) ES2017 進(jìn)行轉(zhuǎn)換和基于使用情況注入 polyfill，（babel 7 + preset-env）
* 支持 PostCSS（默認(rèn)啟用 autoprefixer）和所有主要的 CSS 預(yù)處理器
* Modern mode
* 多頁(yè)面模式,構(gòu)建具有多個(gè) HTML / JS 入口點(diǎn)的應(yīng)用程序

圖形用戶界面 (GUI）

vue ui

無(wú)需eject即可配置

構(gòu)建項(xiàng)目時(shí),通過(guò)安裝 Vue CLI 運(yùn)行時(shí)服務(wù)（@ vue / cli-service），選擇功能插件，生成必要的配置文件即可

可擴(kuò)展的插件系統(tǒng)

Instant Prototyping

vue-cli3文檔

二、分環(huán)境配置相關(guān) vue.config.js

雖說(shuō)項(xiàng)目創(chuàng)建搭起即可用，但在實(shí)際開發(fā)中，我們需要根據(jù)不同環(huán)境對(duì)應(yīng)不同的配置。比如開發(fā)環(huán)境，測(cè)試環(huán)境，正式環(huán)境等。在vue-cli3的項(xiàng)目中，我們無(wú)法改變打包文件但又要區(qū)分環(huán)境，在度娘里也有很多方法可行

（一）

1.我們知道，
npm run serve時(shí)會(huì)把process.env.NODE_ENV設(shè)置為‘development’；
npm run build 時(shí)則會(huì)把process.env.NODE_ENV設(shè)置為‘production’；
2.既然這樣，那就只要根據(jù)process.env.NODE_ENV設(shè)置為不同請(qǐng)求url就可以了
3.在package.json添加 vue-cli-service build --mode alpha

{

    ···
    "scripts": {
        "serve": "vue-cli-service serve", //本地運(yùn)行，process.env.NODE_ENV設(shè)置為‘development’
        "serve:alpha": "vue-cli-service serve --mode alpha", // 運(yùn)行，根據(jù)項(xiàng)目環(huán)境運(yùn)行對(duì)應(yīng)的url

        "build:alpha": "vue-cli-service build --mode alpha", // 打包，會(huì)把process.env.NODE_ENV設(shè)置為‘.env.alpha’文件設(shè)置的值。
        // 注意，這里 “--mode 名字“ 要和文件名“.env.名字”名字保持一致

        "build": "vue-cli-service build" //打包， 會(huì)把process.env.NODE_ENV設(shè)置為‘production’
    },
    "dependencies": {
        ···
    },
    ···
    }

4.然后在根目錄下添加文件“.env.alpha”，內(nèi)容為：

NODE_ENV = 'alpha'

5.這樣在vue.congif.js是可以拿到這個(gè)自己定義的值

const env = process.env.NODE_ENV;
console.log(env); // 運(yùn)行/打包都可以拿到alpha值，再根據(jù)這個(gè)值去匹配對(duì)應(yīng)的url

這種以命令 --mode 名字的形式，npm run build:alpha即可以打測(cè)試環(huán)境包，npm run build則打生產(chǎn)包
我一開始也是如此去根據(jù)--mode 名字的形式去寫不同環(huán)境，后來(lái)發(fā)現(xiàn)這樣運(yùn)行和打包出來(lái)是有差異的。
通過(guò)改變process.env.NODE_ENV值區(qū)分運(yùn)行/打包環(huán)境，webpack打包時(shí)針對(duì)process.env.NODE_ENV===‘production’和其他情況打出來(lái)的包結(jié)構(gòu)和大小都不一樣。

（二）

在（一）的基礎(chǔ)上，不改變process.env.NODE_ENV的值，生成和開發(fā)分別還是production/development

1.在項(xiàng)目的根目錄下添加對(duì)應(yīng)文件“.env.alpha”“.env.build”，內(nèi)容分別是

NODE_ENV = 'production'
VUE_APP_HOST = 'alpha'

NODE_ENV = 'production'
VUE_APP_HOST = 'production'

在項(xiàng)目中通過(guò) process.env.VUE_APP_HOST可以拿到對(duì)應(yīng)的值。這種以VUE_APP_xx開頭的可以設(shè)定為全局變量
如果當(dāng)前開發(fā)時(shí)，你只需運(yùn)行一個(gè)環(huán)境，打包兩種環(huán)境包。這樣寫還是可以配置的。
如果是三個(gè)以上環(huán)境或是運(yùn)行也區(qū)分環(huán)境，就需要添加較多文件，就不建議如此(哈哈我是這么覺得滴)

（三）運(yùn)行為不同環(huán)境，打包也為不同環(huán)境區(qū)分

1.package.json添加“vue-cli-service serve env=mock”"vue-cli-service serve env=alpha"

{

    ···
    "scripts": {
      "serve": "vue-cli-service serve", //本地運(yùn)行，process.env.NODE_ENV設(shè)置為‘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" //打包， 會(huì)把process.env.NODE_ENV設(shè)置為‘production’
    },
    "dependencies": {
      ···
    },
    ···
}

2.vue.config.js中通過(guò) process.argv 去獲取參數(shù)

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或是自己需要的地方暴露一下這個(gè)變量

export const API_ENV = process.env.VUE_APP_HOST_ENV;

4.完。繼續(xù)擼碼

不足之處，請(qǐng)多多多多多多指教:)

參考一