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

上一節中咱們介紹到相關必要的依賴注入 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，此步驟如圖

步驟3

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

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

這樣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的文檔詳情