一 、更新有什么

豐富的內置功能

（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.完。繼續擼碼

不足之處，請多多多多多多指教:)

參考一