webpack多環境(dev stg prd qa)打包問題

柘一發表於2018-04-12
Webdev

webpack多環境(dev stg prd qa)打包問題

針對前後端分離的專案，在多環境部署的時候，不同環境的前端分別呼叫的後端介面不同，怎麼實現呢？

1. 指令碼入口地方傳入環境資訊

  "scripts": {
    "build:dev": "cross-env NODE_ENV=dev node build/build.js",
    "build:stg": "cross-env NODE_ENV=stg node build/build.js",
    "build:prd": "cross-env NODE_ENV=prd node build/build.js",
    "build:qa": "cross-env NODE_ENV=qa node build/build.js"
  }
  "devDependencies": {
	"cross-env": "^5.0.1"
   }	
複製程式碼

其中通過cross-env進行NODE環境的設定，其中build/build.js是webpack的配置

2. webpack配置

plugins: [
    new webpack.DefinePlugin({
      __ENV__: JSON.stringify(process.env.NODE_ENV)
    })
   ]
複製程式碼

webpack中通過webpack外掛DefinePlugin可以在編譯器建立一個全域性的環境變數__ENV__，其中儲存的就是對應的環境資訊(dev stg prd qa)。

3.程式碼中的配置

api.config.js

/* eslint-disable */
const env = __ENV__ || 'dev'; // 預設是dev
const pdfParse = {
    dev: '...',
    stg: '...',
    prd: '...',
    qa: '...'
}
const api = {
    pdfParse: pdfParse[env]
}
export default api;
複製程式碼

4.程式碼中的呼叫

import axios from 'axios';
import api from '../../api.config.js';
const BACK_END_URL = api.pdfParse + '/parse/';
axios.get(BACK_END_URL).then(...).catch(...);
複製程式碼

這樣就能夠通過執行不同的npm指令碼進行不同環境的打包部署了。例如 npm run build:dev 打包後皆可以部署dev環境了，其呼叫的後端介面就是api.config.js中配置的dev的地址。

相關文章