需求

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

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

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

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

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

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

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

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

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

定義好環(huán)境變量之后，把項目制定的路徑配置到路由和 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 的值來判斷是線上生產(chǎn)環(huán)境還是線上測試環(huán)境，用以編寫不同的業(yè)務(wù)代碼。例：

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

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

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

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

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

合并構(gòu)建打包命令并且自動生成壓縮文件

將兩個命令合并成一個很簡單，只需要在 package.json 里面配置一下，新建一個新的命令用于同時調(diào)用兩個命令。

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

這樣配置好之后，只要執(zhí)行npm run publish， 它會自動先執(zhí)行正式環(huán)境構(gòu)建打包，完成之后再自動執(zhí)行測試環(huán)境的構(gòu)建打包，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`}
      ]
     }
    }])
  }
 }
}

PS：vue-cli3開發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)分

在vue-cli3的項目中，

npm run serve時會把process.env.NODE_ENV設(shè)置為‘development'；

npm run build 時會把process.env.NODE_ENV設(shè)置為‘production'；

或，配置publicPath等：

publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.xxx.com/folder' : '';

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論