vue项目代理配置+使用nginx部署的请求代理配置

本文介绍了Vue项目在开发环境和生产环境中处理跨域问题的代理配置。在开发环境,分别展示了vue-cli2和vue-cli3版本的代理配置方法。在生产环境,讲解了如何使用Nginx部署打包后的Vue项目并配置代理,以实现与后端接口的通信。
摘要由CSDN通过智能技术生成

由于vue项目的前后端分离,代码里的请求基本上都会涉及跨域,所以有必要在项目中配置代理地址。如果是使用nginx部署前端项目,而接口是运行在其他服务上的,那么nginx同样也需要配置代理,当然,如果前端项目跟接口是运行在同一个服务上,这种情况就只需要配置开发环境就行。
以下是使用nginx部署打包好的vue项目,而后端接口使用其他服务部署的vue配置以及nginx配置

开发环境

1. 使用vue-cli2版本创建的vue项目

在 config/index.js 文件内配置以下代码

module.exports = {
   
	dev: {
   
		proxyTable: {
   
			'/api':{
   
				// 目标地址
				target:'http://10.200.8.55:8080',
				// 是否允许跨域
				changeOrigin:true,
				// 将路径中的 '/api' 替换成 ''
				pathRewrite: {
   
					'^/api'</
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值