前端 webpack 打包环境配置，根据指令适配请求地址

最新推荐文章于 2025-06-13 20:32:27 发布

原创最新推荐文章于 2025-06-13 20:32:27 发布 · 924 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #node.js #javascript

webpack 同时被 3 个专栏收录

2 篇文章

订阅专栏

nodejs

2 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

本文介绍如何通过环境变量区分不同环境下的API请求路径，使用cross-env在npm脚本中设置环境变量，以及根据环境变量动态配置axios的baseURL，实现测试与开发环境下请求地址的灵活切换。

这里我们假如有两个地址用来发包，分别是
测试： “http://127.0.0.1:9000/ops/”
开发： “http://127.0.0.1:9000/opsdev/"

服务地址为
测试： “http://127.0.0.1:9000/api/ops/api”
开发： “http://127.0.0.1:9000/api/opsdev/api"
当环境不同时，请求地址的基地址需要作出相应改变

使用cross-env 添加环境变量

npm install --save-dev cross-env

在package.json里面编辑


	{
		"scripts":{
			"build":"umi build"	,
			"build:opsdev":"cross-env OPSDEV_ENV=opsdev umi build"
		}
	}

设置ajax请求路径基地址

	const API = OPS_ENV === 'opsdev'?`/api/${OPS_ENV}/api`:'/api/ops/api'
	
	axios.defaults.baseURL='http://127.0.0.1:9000'+ API 
	
	axios.get('/user/xxx')
	//npm build 时，为 http://127.0.0.1:9000/api/ops/api/user/xxx
	//npm build:opsdev 时，为 http://127.0.0.1:9000/api/opsdev/api/user/xxx