需求

首先介紹一下本項目的背景，是基于 vue-cli3.1.1 的單頁應用，目前測試環境和生產環境都在線上，并且都在同一個域名下，其中生產環境部署在根目錄下，測試環境部署在名為 test 的子目錄下，根據生產環境和測試環境的不同，某些界面和交互有細微的差別。

根據以上項目的基本情況，分析出需求如下：

配置環境變量和模式

根據 vue-cli3 文檔，可以通過設置項目根目錄下的 .env，.env.[mode] 文件來指定環境變量。

創建一個 .env 和 .env.beta 文件，在 .env 文件中，配置如下：

VUE_APP_URL = '/' // 用來設置項目的 baseUrl 和路由的 base 選項 默認是根目錄VUE_APP_MODE = '' // 設置一個變量 區分線上生產環境和線上測試環境 默認是生產環境outputDir = 'dist' // 用來設置打包后生成的文件夾的名字，默認為 dist 文件夾

在 .env.beta 文件中，配置線上測試環境，如下：

NODE_ENV = 'production' // 因為是打包項目 所以 NODE_ENV 還是 productionVUE_APP_URL = '/test/' // 線上測試環境，部署在 test 目錄下 VUE_APP_MODE = 'test' // 這個變量表示當前是線上測試環境outputDir = 'beta'  // 將線上測試環境打包后生成的代碼放在 beta 文件夾下，以示區別。

定義好環境變量之后，把項目制定的路徑配置到路由和 vue 配置文件中去：

// router.jsexport default new Router({ base: process.env.VUE_APP_URL, ...})// vue.config.jsmodule.exports = { baseUrl: process.env.VUE_APP_URL, // 從 Vue CLI 3.3 起已棄用，改成publicPath}

在項目代碼中，可以在任意位置使用 process.env.VUE_APP_MODE 的值來判斷是線上生產環境還是線上測試環境，用以編寫不同的業務代碼。例：

if(process.env.VUE_APP_MODE == 'test'){ this.name = '線上測試用戶'}

配置好不同模式的環境變量之后，在 package.json 里面設置一個 beta 模式：

{ "scripts": {  ...  "beta": "vue-cli-service build --mode beta" }}

這樣配置完之后，在命令行運行 npm run beta ，會在根目錄下生成一個 beta 文件夾，里面就是打包出來的線上測試版本的項目文件。

至此就完成了分環境配置打包，但是這樣的麻煩點在于，每次要在命令行輸入兩次命令，因為我們的項目文件都是發送給后端去部署，所以還需要把文件壓縮成 zip，每次都要手動操作，是在有點累。所以，還需要進行一些小小的改造，徹底解放俺們的雙手~~