当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 19:09:41 HTML

webpack的env.js配置文件可以配置环境变量,也可以添加一些自己的自定义配置。生产环境下载文件url://prod.env.jsmodule.exports={NODE_ENV:'"production"',exportUrl:'"http://prod.XXX.com"'};如果需要在开发环境下载地址和生产环境不同时,需要根据当前环境使用对应的下载接口url,所以可以尝试在prod.env.js中都添加一个下载地址而dev.env.js用于项目中文件下载(Export)exportUrl,因为本地调试和生产包调用的下载接口不同(本地:http://192.168.11.11:8080/sys...,生产:http://prod.xxx.com/system/do...),在开发环境配置中,一般直接调用当前后台接口,那么在index.js中直接使用后台url即可导出//dev.env.jsconstmerge=require('webpack-merge')constprodEnv=require('./prod.env')constindexjs=require('./index');module.exports=merge(prodEnv,{NODE_ENV:'"development"',exportUrl:'"'+indexjs.dev.proxyTable['/apis'].target.replace(/\/system\/?$/,'')+'"'})导出地址exportUrlindev(本地开发)的情况下,在index.js中写的是直接获取代理目标的后端地址,这里我们再次使用正则表达式对地址进行处理(去掉最后一个后缀),然后添加使用时导出接口地址和入参,这样可以在不同的环境下使用从不同的地址下载文件//index.jsmodule.exports={...dev:{...proxyTable:{"/apis":{目标:'http://localhost:8080/system',//接口域名changeOrigin:true,//是否跨域pathRewrite:{"^/apis":""}}},}使用方法:直接取地址下载getDownLoadUrl=()=>{返回process.env.exportUrl;};或者在生产环境直接获取当前域:getDownLoadUrl=()=>{if(process.env.NODE_ENV==='development'){returnprocess.env.exportUrl;}returnwindow.location.origin;//生产环境导出源为当前域};