vue cli 分環境打包 附加打包時間

前言

在開發專案的時候，呼叫後端介面難免遇到要切換各種環境的情況，比如開發聯調後端開發，聯調測試，聯調線上，打包測試，打包正式等等，每次切換都需要切換不同的請求服務位址，手動改來改去比較麻煩，那麼能否通過一條命令就能自動切換環境，答案是可以的，本次著重解決這個問題。

適用環境配置

vue-cli:3.x、4.x

步驟

首先配置 專案根目錄下的package.json檔案的scripts，在執行命令後面新增--mode dev，可以根據需要自定義執行環境名稱 

--mode 環境名，我新增了以下幾個環境 dev開發環境，test打包測試環境，production打包正式環境

"scripts": ,

.env.dev檔案內容如下：

node_env = development                               // 執行環境

public_path = '/'                                    // 專案部署目錄 用於vue-router 配置中的baseurl

node_env = 'production'

public_path = '/'

node_env = 'production'

public_path = '/'

node_env是webpack中的執行模式，這裡只能設定 development 、production、none，一般開發用前兩個值即可

module.exports =

vue.config.js檔案的跨域**

module.exports = ,

'/': }},
}

module.exports =

總結

1.利用不同的打包命令 --mode 加不同配置檔案，以滿足區分不同環境測需求

2.通過nodejs的 process.env獲取配置檔案的變數，應用到專案當中

the end

vue cli3實現分環境打包

在vue cli3的專案中，預設的package.json配置 此時只要根據process.env.node env設定不同請求url就可以很簡單的區分出本地和線上環境。但是實際真實的專案中，會有測試，預發布等環境。並且vue cli3號稱0配置，無法直接修改打包檔案，那麼怎麼區分不同的線上環境呢？...

給webpack打包新增打包時間

正常情況下構建的工程，一般都會自帶這些資訊引數，但是遇到乙個老專案，並沒時間引數，在做打包優化的過程中，都看不到打包時間，所以需要自己補上 打包 的核心 中有個stats引數，裡邊就有starttime，endtime 屬性，我們簡單加工一下 新增的打包時間 打包時間 const times sta...

vue cli分模組獨立打包

一 目標 我們要實現什麼？所謂分模組打包，也可以說乙個專案乙個模組，理解 在src目錄下，多個專案共用一些資料方法，但是每個專案有自己獨立的入口檔案，路由檔案，介面樣式都不同，可以單獨執行，單獨打包。按照這種構想，我在乙個新的腳手架src目錄下新建了乙個projects目錄 如上圖，可以看到apro...