关于前端:webpack在开发生产下调各自环境的接口

webpack 的 env.js 配置文件能够配置环境变量，同时也可额定退出一些本人的自定义配置。

生产环境下的下载文件 url：

//prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  exportUrl: '"http://prod.XXX.com"'
};

如果要求开发环境的下载地址和生产的不一样时就须要依据以后环境应用对应的下载接口 url，这样就能够试试在 prod.env.js 和dev.env.js中都别离加一个 下载地址 用于我的项目中的文件下载（导出）exportUrl，因为在本地调试和生产包调用的下载接口不一样（本地：http://192.168.11.11:8080/sys…，生产：http://prod.xxx.com/system/do…），在开发环境配置中个别都是间接调用以后的后端接口，那么能够间接利用获取 index.js 中的 后端 url来进行导出:

//dev.env.js
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const indexjs = require('./index');
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  exportUrl: '"'+indexjs.dev.proxyTable['/apis'].target.replace(/\/system\/?$/,'')+'"'
})

在 dev（本地开发）状况下导出地址 exportUrl 写成间接获取 index.js 中的代理 target 后端地址，这里用正则再解决一下地址（去除最初的后缀）, 而后在应用的时候加上导出接口地址和入参，这样就能在不同的环境应用不同的地址进行文件下载了

//index.js
module.exports = {
...
  dev: {
...
    proxyTable: {
      "/apis": {
         target: 'http://localhost:8080/system',  // 接口域名
        changeOrigin: true, // 是否跨域
        pathRewrite: {"^/apis": ""}
      }
    },
}

应用办法：间接取地址进行下载

getDownLoadUrl = () => {return process.env.exportUrl;};

或者在生产环境就间接获取以后域：

getDownLoadUrl = () => {if(process.env.NODE_ENV === 'development'){return process.env.exportUrl;}
  return window.location.origin;// 生产环境导出源是以后域

 };