針對先後端分離的項目,在多環境部署的時候,不一樣環境的前端分別調用的後端接口不一樣,怎麼實現呢?
"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
plugins: [ new webpack.DefinePlugin({ __ENV__: JSON.stringify(process.env.NODE_ENV) }) ]
webpack
中經過webpack插件DefinePlugin能夠在編譯器建立一個全局的環境變量__ENV__
,其中存儲的就是對應的環境信息(dev stg prd qa)。前端
api.config.jsjava
/* eslint-disable */ const env = __ENV__ || 'dev'; // 默認是dev const pdfParse = { dev: '...', stg: '...', prd: '...', qa: '...' } const api = { pdfParse: pdfParse[env] } export default api;
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