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

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

开发环境

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

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

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

使用vue-cli3版本创建的vue项目

在 vue.config.js 中配置以下代码

参考vue cli官方文档

// vue.config.js
module.exports = {
    // 选项...
    devServer: {
        proxy: {
            '/api': {
                // 目标地址
                target: 'http://172.16.100.231:8088',
                ws: true,
                // 设置允许跨域
                changeOrigin: true,
                pathRewrite: {
                    //把访问路径中的/api替换掉
                    '^/api': ''
                }
            }
        }
    },
    ...
}

项目中请求的地址

url: '/api/...'

生产环境

使用nginx部署项目

server {
	#监听端口
	listen       80;
	#服务运行地址
	server_name  127.0.0.1;
	
	#charset koi8-r;
	#access_log  logs/host.access.log  main;
	
	#设置允许跨域
	#add_header Access-Control-Allow-Origin *;
	#add_header Access-Control-Allow-Methods POST,GET,OPTIONS;
	#add_header Access-Control-Allow-Headers Authorization;
	
	#静态资源目录
	root home/dist;
	
	location / {
		index index.html index.htm;
		#配合vue-router的history模式
		try_files $uri $uri/ @router;
	}
	#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
	#因此需要rewrite到index.html中,然后交给路由在处理请求资源
	location @router {
		rewrite ^.*$ /index.html last;
	}
	#vue项目中的请求地址前面都需要加上api
	#发起请求的代理配置,地址包含/api的回全部替换地址并转发到proxy_pass下的地址
	location /api/ {
		rewrite ^/b/(.*)$ /$1 break;
		proxy_pass http://172.16.100.231:8088/;
	}
	...
}

  • 6
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的 nginx 本地部署 Vue 应用并反向代理配置的示例: 1. 打包 Vue 应用 首先需要在本地打包 Vue 应用,运行以下命令: ``` npm run build ``` 打包完成后,会在项目根目录下生成一个 `dist` 目录,其包含了所有打包后的静态文件。 2. 配置 nginxnginx配置目录,创建一个新的配置文件,比如 `myapp.conf`,并将以下内容复制进去: ``` server { listen 80; server_name myapp.com; root /path/to/dist; # 将 "/path/to/dist" 改为你实际的 dist 目录路径 index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 其,`myapp.com` 是你的域名,`/path/to/dist` 是你的 Vue 应用的打包后的静态文件所在的目录路径,`/api/` 是你要反向代理的后端 API 的前缀,`localhost:8080` 是你要代理的本地服务地址。 在上面的配置,`location /` 部分将所有请求都指向 Vue 应用的入口文件 `index.html`,`location /api/` 部分将以 `/api/` 开头的请求代理到本地服务上,并设置了一些请求头,包括 `Host`、`X-Real-IP` 和 `X-Forwarded-For`。 3. 启动 nginx 将 `myapp.conf` 配置文件放置在 nginx配置目录,通常位于 `/etc/nginx/conf.d/` 目录下。最后,重启 nginx 服务以应用新的配置。 ``` sudo service nginx restart ``` 现在,你可以通过访问 `http://myapp.com` 来访问 Vue 应用,并通过访问 `http://myapp.com/api/` 来访问本地服务的 API 接口了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值