vue-cli3配置生產(chǎn)-測(cè)試環(huán)境

配置環(huán)境變量和模式

根據(jù) vue-cli3 文檔，可以通過設(shè)置項(xiàng)目根目錄下的 .env，.env.[mode] 文件來指定環(huán)境變量。

1. 創(chuàng)建一個(gè) .env 和 .env.beta 文件，在 .env 文件中，配置如下：

   VUE_APP_URL = '/'   // 用來設(shè)置項(xiàng)目的 baseUrl 和路由的 base 選項(xiàng) 默認(rèn)是根目錄
   VUE_APP_MODE = ''   // 設(shè)置一個(gè)變量 區(qū)分線上生產(chǎn)環(huán)境和線上測(cè)試環(huán)境 默認(rèn)是生產(chǎn)環(huán)境
   outputDir = 'dist'  // 用來設(shè)置打包后生成的文件夾的名字，默認(rèn)為 dist 文件夾
   

2. 在 .env.beta 文件中，配置線上測(cè)試環(huán)境，如下：

   NODE_ENV = 'production'   // 因?yàn)槭谴虬?xiàng)目 所以 NODE_ENV 還是 production
   VUE_APP_URL = '/test/'   // 線上測(cè)試環(huán)境，部署在 test 目錄下 
   VUE_APP_MODE = 'test'   // 這個(gè)變量表示當(dāng)前是線上測(cè)試環(huán)境
   outputDir = 'beta'      // 將線上測(cè)試環(huán)境打包后生成的代碼放在 beta 文件夾下，以示區(qū)別。
   

3. 定義好環(huán)境變量之后，把項(xiàng)目制定的路徑配置到路由和 vue 配置文件中去：

   // router.js
   export default new Router({
       base: process.env.VUE_APP_URL,
    ...
   })
   
   // vue.config.js
   module.exports = {
        publicPath: process.env.VUE_APP_URL,
       outputDir: process.env.outputDir,
   }
   

4. 在項(xiàng)目代碼中，可以在任意位置使用 process.env.VUE_APP_MODE 的值來判斷是線上生產(chǎn)環(huán)境還是線上測(cè)試環(huán)境，用以編寫不同的業(yè)務(wù)代碼。例：

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

5. 配置好不同模式的環(huán)境變量之后，在 package.json 里面設(shè)置一個(gè) beta 模式：

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

   這樣配置完之后，在命令行運(yùn)行 npm run beta ，會(huì)在根目錄下生成一個(gè) beta 文件夾，里面就是打包出來的線上測(cè)試版本的項(xiàng)目文件。
   如果你需要同時(shí)打包正式和測(cè)試版本

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

   這樣配置好之后，只要執(zhí)行npm run publish， 它會(huì)自動(dòng)先執(zhí)行正式環(huán)境構(gòu)建打包，完成之后再自動(dòng)執(zhí)行測(cè)試環(huán)境的構(gòu)建打包。

代碼自動(dòng)壓縮

1. 安裝插件

   yarn add filemanager-webpack-plugin --dev
   

2. 安裝完成之后，在 vue.config.js 里面配置一下這個(gè)插件，它提供了豐富的操作文件的選項(xiàng) ，這里我只需要使用刪除和壓縮.

   const FileManagerPlugin = require('filemanager-webpack-plugin')
   module.exports = {
      ...
     chainWebpack: config => {
       let mode = ''
       let path = ''
       if (process.env.VUE_APP_MODE === 'test') {
         path = './beta'
         mode = '測(cè)試版'
       } else {
         path = './dist'
         mode = '正式版'
       }
       config.plugin('compress').use(FileManagerPlugin, [
         {
           onEnd: {
             delete: [
               //首先需要?jiǎng)h除項(xiàng)目根目錄下的dist.zip
               `${path}/*.zip` // eg: './dist/*zip
             ],
             archive: [
               //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
               {
                 source: `${path}`, // eg: './dist
                 destination: `${path}/ProjectName-${mode}-${new Date().getTime()}.zip` // eg: './dist/項(xiàng)目名稱-正式版-時(shí)間.zip'
               }
             ]
           }
         }
       ])
     }
   }
   

3. 運(yùn)行 yarn buildoryarn beta試試