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

需求

首先介紹一下本項目的背景，是基於 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"
    }
}

這樣配置完以後，在命令行運行 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`}
                      ]
                    }
                }])
        }
    }
}

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