需求

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

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

• 實現區分線上生產環境和線上測試環境的環境變量，供項目代碼中全局使用。
• 實現輸入一行命令，執行兩條指令，分別打包線上生產環境和線上測試環境的代碼。
• 實現打包之後，自動將打包好的文件夾分別按照項目名+時間+環境的格式壓縮成 zip 文件

配置環境變量和模式

根據 vue-cli3 文檔，可以通過設置項目根目錄下的 .env

創建一個 .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"
    }
}

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

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

合並構建打包命令並且自動生成壓縮文件

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

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

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

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

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

npm install filemanager-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`}
                      ]
                    }
                }])
        }
    }
}

歐克 ~ 大功告成 ~ ^_^ ~

vue-cli3 配置生產-測試環境