likes
comments
collection
share

webpack在开发/生产下调各自环境的接口

作者站长头像
站长
· 阅读数 30

webpack的env.js配置文件可以配置环境变量,同时也可额外加入一些自己的自定义配置。

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

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

如果要求开发环境的下载地址和生产的不一样时就需要根据当前环境使用对应的下载接口url,这样就可以试试在prod.env.jsdev.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;//生产环境导出源是当前域

 };