vue如何配置去请求不同接口

最新推荐文章于 2024-08-19 03:19:40 发布

super。。。

最新推荐文章于 2024-08-19 03:19:40 发布

阅读量1.5k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45827741/article/details/115487429

版权

本文介绍了在Vue项目中如何配置vue.config.js以适配不同环境的API接口。通过在项目根目录创建.env.development、.env.test和.env.production文件，设置环境变量，并在vue.config.js中根据这些环境变量来修改请求的公共前缀。在package.json中，为每个环境配置相应的打包命令，如npm run test用于打包到测试环境，npm run production用于线上环境。

摘要由CSDN通过智能技术生成

刚开始的时候很不懂vue.config.js中请求接口在本地起作用，但是打包放到测试环境就会报错。。
也是了解了很多关于vue.config.js配置但也只是略懂，要不就是还会出bug,后来也是针对项目有了经验才懂了

第一步：和package.json同级创建不同环境的文件，公司项目需要几个环境就创建几个
例如：有test(测试)、development(本地)、production(线上)这三个环境，
所以创建文件分别为 .env.development .env.test .env.production
在这里插入图片描述

在每个文件夹中：

# 模式的名称
NODE_ENV = 'development'   //这里名字与文件名相同，以免搞混或者记不住

VUE_APP_BASE_URL = "接口公共部分"
VUE_APP_BASE_ API = ""

重点来了。。。
在vue.config.js的module.exports对象中:

	devServer: {
	    open: false, // process.platform === 'darwin' 启动后自动打开浏览器
	    host: "0.0.0.0", // 允许外部ip访问
	    port: 8899, // 端口  这些都是可以改的
	    https: false, // 是否启用https
	    overlay: {
	      warnings: true,
	      errors: true
	    }, //

最低0.47元/天解锁文章