需求

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

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

• 實現區分線上生產環境和線上測試環境的環境變數，供專案程式碼中全域性使用。
• 實現輸入一行命令，執行兩條指令，分別打包線上生產環境和線上測試環境的程式碼。
• 實現打包之後，自動將打包好的資料夾分別按照專案名+時間+環境的格式壓縮成 zip 檔案

配置環境變數和模式

根據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 還是 production
VUE_APP_URL = '/test/'   // 線上測試環境，部署在 test 目錄下 
VUE_APP_MODE = 'test'   // 這個變量表示當前是線上測試環境
outputDir = 'beta'      // 將線上測試環境打包後生成的程式碼放在 beta 資料夾下，以示區別。
 

定義好環境變數之後，把專案制定的路徑配置到路由和 vue 配置檔案中去：

// router.js
export default new Router({
    base: process.env.VUE_APP_URL,
    ...
})

// vue.config.js
module.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"
    }
}

這樣配置完之後，在命令列執行npmrun beta，會在根目錄下生成一個 beta 資料夾，裡面就是打包出來的線上測試版本的專案檔案。

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

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

合併構建打包命令並且自動生成壓縮檔案

將兩個命令合併成一個很簡單，只需要在package.json裡面配置一下，新建一個新的命令用於同時呼叫兩個命令。

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

這樣配置好之後，只要執行npmrun publish， 它會自動先執行正式環境構建打包，完成之後再自動執行測試環境的構建打包，hin是方便~~

接著再配置自動壓縮，這裡就需要使用到一個webpack的外掛 —filemanager-webpack-plugin。

先安裝，可以在命令列安裝，也可以直接在 vue-cli3 自帶的圖形管理介面搜尋安裝，都挺方便。

npminstallfilemanager-webpack-plugin-dev

安裝完成之後，在vue.config.js裡面配置一下這個外掛，它提供了豐富的操作檔案的選項 ，這裡我只需要使用刪除和壓縮：

let ts = Date.parse(new Date());
module.exports = {
    ...,
    chainWebpack: (config) => {
                if(process.env.VUE_APP_MODE == 'test'){
            config.plugin('compress')
                .use(FileManagerPlugin, [{
                    onEnd: {
                      delete: [   //首先需要刪除專案根目錄下的dist.zip
                        './*.zip',
                      ],
                      archive: [   //然後我們選擇dist資料夾將之打包成dist.zip並放在根目錄
                        {source: './dist', destination: `./biProject-${ts}-production.zip`},
                        {source: './beta', destination: `./biProject-${ts}-test.zip`}
                      ]
                    }
                }])
        }
    }
}