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

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的配置javascript

2. webpack配置

plugins: [
    new webpack.DefinePlugin({
      __ENV__: JSON.stringify(process.env.NODE_ENV)
    })
   ]

webpack中經過webpack插件DefinePlugin能夠在編譯器建立一個全局的環境變量__ENV__,其中存儲的就是對應的環境信息(dev stg prd qa)。前端

3.代碼中的配置

api.config.jsjava

/* 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的地址。node

相關文章
相關標籤/搜索