vuecli3中webpack配置相關

1.環境變量和模式

在開發項目過程當中，正常狀況下會有本地開發環境，測試線環境，線上正式線環境等，不一樣環境的配置會有所不一樣，好比咱們服務器地址，接口地址等等。因此咱們要區分，那就需環咱們配置境變量和模式，來管理。

官方文檔：cli.vuejs.org/zh/guide/mo…

1、環境變量的4種方式

在官方文檔中，CLI3.0有四種方式來指定環境變量：

.env                # 在全部的環境中被載入
.env.local          # 在全部的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略
複製代碼

看官方上的說明，意思就是：不一樣的文件會在不一樣環境中被載入，好比咱們這樣寫：

.env                     # 會在全部的環境中被載入
.env.local               # 會在全部環境中載入，但只限於本地，不會被git跟蹤，git會忽略掉它
.env.development         # 只在開發環境中被載入
.env.production          # 只在生產環境中被載入
.env.development.local   # 會在本地開發環境中載入，不會被git跟蹤，git會忽略掉它
複製代碼

這些環境變量都是在項目根目錄下創建的，若是寫有變量，那麼咱們運行相關命令的時候，會根據不一樣環境載入不一樣的文件，以致於能正確讀到文件裏的變量。載入的優先級別是：

.env.[mode].local > .env.[mode] > .env
複製代碼

2、3種模式

默認狀況下，一個 Vue CLI 項目有三個模式:

development    # 模式用於 vue-cli-service serve
production     # 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
test           # 模式用於 vue-cli-service test:unit
複製代碼

咱們能夠經過爲 .env 文件增長後綴來設置某個模式下特有的環境變量，意思就是：某些文件只會在某個模式下被載入，好比： .env.development 的文件就只會在 development 模式下被載入。

固然，咱們是能夠經過參數來修改默認模式的。經過–mode 後面跟上指定模式名來修改，–mode development。好比咱們想在build構建的時候，使用開發環境的變量。

"build": "vue-cli-service build --mode development"
// 或者咱們能夠新加入一個：
"dev-build": "vue-cli-service build --mode development"
複製代碼

3、代碼中使用環境變量

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你能夠在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)
複製代碼

固然，除了 VUE_APP_*的自定義變量以外，還有兩個特殊的變量，咱們始終均可以使用：

NODE_ENV  - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決於應用運行的模式。
BASE_URL  - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。
複製代碼

4、配置實踐

首先，咱們在根目錄下新建.env、.env.development、.env.development.local 和.env.production，它們的代碼分別爲：

// env
// 這裏放置共有的環境變量
VUE_APP_URL=eeeeee
VUE_APP_text=zheshism

// env.production
// 這裏放置生產環境變量
NODE_ENV=production
VUE_APP_URL=pppppp

// env.development
// 這裏放置開發環境變量
NODE_ENV=development
VUE_APP_URL=dddddddd

// env.development.local
// 這裏放置開發環境本地有差別性變量
NODE_ENV=development.local
VUE_APP_URL=dddlllll
複製代碼

在頁面使用時，好比Home.vue頁面

當咱們運行npm run serve 這個命令時，默認的是develpoment模式，會加載咱們建的.env,.env.development,.env.development.local文件.

根據環境加載優先級，也就是 .env.development.local > .env.development > .env的優先級。

最後會顯示.env.development.local的內容：如圖：

2.開發時的跨域設置

若是咱們有單獨的後端開發服務器 API，而且但願在同一域名下發送 API 請求, 咱們能夠配置跨域，具體能夠根據文檔配置本身的需求。www.webpackjs.com/configurati…

3.SplitChunksPlugin分割代碼

這個配置有點多，我單獨寫了篇文章介紹。juejin.im/post/5dccab…

其它配置，後續實際開發中遇到再補充