Vue.js+Element-UI從0到部署:基礎篇（3.前端自動化、多環境配置到釋出）

gold_gold發表於2017-12-14
Vue.jsUI前端

上一節中我們介紹到相關必要的依賴注入 Vue.js 2.0 + Element UI 從0到部署 實踐教程（1.相關依賴注入） 在實際開發過程中，往往不只develop 和production兩種環境，往往還有測試環境，模擬環境等等，需要配置不同的選項（BASE_API等），本文將一步一步進行講解如何新增環境配置。本文例項為增加一個測試環境的打包配置。並且結合 fjpublish 配置構建 多環境打包，並且自動化釋出到伺服器。

多環境打包

步驟1

在./config資料夾下新建一個sit.env.js 的檔案

// 測試模擬環境
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://120.55.169.121:8888/index"',
  CRM_PATH: '"http://120.55.169.121:8083"',        //  其他配置
};
複製程式碼

dev.env.js 、prode.env.js 也可進行類似的配置，把各個環境請求的不同埠配置在這

後面在你的程式中，如果要使用這些變數可參考下例

let baseUrl  = process.env.BASE_API;  
let crmPath = process.env.CRM_PATH;
// 建立axios例項
const service = axios.create({
  baseURL: BASE_API,      // api的base_url
})
複製程式碼

步驟2

修改./build/build.js 檔案，將 process.env.NODE_ENV = 'production' 註釋或者刪除，因為我們在後面需要動態配置NODE_ENV，此步驟如圖

./build/build.js

步驟3

修改./build/webpack.prod.conf.js 檔案 修改 evn,不BB直接上圖

const env = require('../config/'+process.env.env_config+'.env')
複製程式碼

./build/webpack.prod.conf.js

這樣webpack 的配置就修改完了。 在這裡可以順便修改一下這個檔案下 UglifyJsPlugin，打包構建的時候可以去除console.log，debugger。配置如下。（此步驟和多環境配置無關）

new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,     // 去除構建的 debugger
        drop_console: true        //  去除構建的 console
      },
      sourceMap: true
    }),

複製程式碼

步驟4

我們需要修改 package.json 的script 語句來增加命令啟動我們新增的服務

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:sit": "NODE_ENV=production env_config=sit node build/build.js",
    "build:prod": "NODE_ENV=production env_config=prod node build/build.js"
  },
複製程式碼

然後啟動 run run build:sit，可是這個時候報錯了，env_config 不被識別，這是由於 windows 不支援 env_config=sit 設定的方式。我們只需要安裝一個 cross-env 的外掛即可

  yarn add cross-env -D   // 或者你使用npm 也可
  npm install cross-env -dev--save
複製程式碼

接下來 繼續修改一個 script 語句啟動即可

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },
複製程式碼

這樣 你啟動 npm run build:sit 將構建打包測試環境的程式碼 生成在 dist 檔案目錄下 啟動 npm run build:prod 將構建打包生產環境的程式碼 生成在 dist 檔案目錄下

多環境釋出

安裝 fjpublish

npm install fjpublish -g
複製程式碼

在專案根目錄下建立一個 fjpublish.config.js 檔案（為fjpublish配置檔案）

module.exports = {
  modules: [{
    name: '測試環境',   
    env: 'sit',
    ssh: {
      host: '11.11.111.11',     // 伺服器地址
      port: 22,                 // 埠
      username: 'root',         // 使用者名稱
      password: 'XXXX'          // 密碼
    },
    buildCommand: 'build:sit',    // 構建命令  === npm run build:sit  
    localPath: 'dist',            // 構建後上傳檔案
    remotePath: '/test/xx',       // 服務端路徑
  }，｛
    name: '其他環境',
    env: 'other',
    ....
｝]
}
複製程式碼

同樣的為了方便我們需要修改 package.json 的script mode

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:sit": "cross-env env_config=sit node build/build.js",
    "build:prod": "cross-env env_config=prod node build/build.js",
    "public:sit": "fjpublish env sit"
  },
複製程式碼

執行命令 npm run public:sit 確認後就會自動打包build:sit的程式碼，並且壓縮後釋出帶你指定的伺服器上，並且執行你的響應配置，如果需要多環境同時釋出，只需要在fjpublish.config.js裡面的modules裡面增加一個物件進行相關配置即可。

至此 Vue-cli 專案的前端自動化已經配置好了。小夥伴們趕緊去試試把！

其他具體配置請看作者@zczhangchao51的文件詳情

相關文章