1.dev.env.jswebpack
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { BASE_API: '"http://localhost:8080/api"', NODE_ENV: '"development"' })
2.index.jsios
module.exports = { dev: {
//解決跨域問題 proxyTable: { "/api": { target: '後端接口前綴地址', changeOrigin: true, pathRewrite: { //須要rewrite重寫的, 若是在服務器端作了處理則能夠不要這段不然必須加上這段。否則會出現請求超時等問題。 '^/api': '' } } }, } }
3.prod.env.js (多套開發環境設置)web
'use strict' module.exports = { NODE_ENV: '"production"', BASE_API_DEV: '"http://a.com"',//開發環境 BASE_API_TEST: '"http://b.com"',//測試環境 BASE_API_PROD: '"http://c.com"',//生產環境 }
4.在requset.js 設置axios默認地址npm
import axios from 'axios' if(location.hostname == 'localhost'){ //開發環境 axios.defaults.baseURI = process.env.BASE_API_DEV }else if(location.hostname == 'www.baidu.com'){ //測試環境 axios.defaults.baseURI = process.env.BASE_API_TEST }else if(location.hostname == 'www.baidu2.com'){ //生產環境 axios.defaults.baseURI = process.env.BASE_API_PROD } 。。。。。。 const service = axios.create({ // 請求延時時間 timeout: settimeout // 拓展:自定義請求頭內容/請求數據類型等 })
以上設置完畢,每次執行 npm run build命令都會根據 當前不一樣的環境而選用不一樣的域名地址。這樣就能夠達到只打包一次就能在不一樣的環境中運行了。axios