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

最新推荐文章于 2024-09-08 15:43:52 发布

超奇怪的大叔

最新推荐文章于 2024-09-08 15:43:52 发布

阅读量3.4k

点赞数

文章标签： nginx vue

本文链接：https://blog.csdn.net/weixin_44394319/article/details/113930095

版权

本文介绍了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'</