nginx反向代理vue项目

文章目录


前言

项目描述:前端vue项目、后端Java项目、首页WordPress项目

客户要求:使用宝塔进行部署

需求描述:客户只有一个SSL单域名DV证书要求首页部署wordpress项目作为官网,/system为vue项目,/api为java后端项目

一、创建站点

1.添加站点

域名填写客户域名、根目录指向wordpress项目地址(此处带过不是重点)

2.添加ssl证书

将证书key、pem(crt)内容拷贝到内容中保存即可

二、反向代理vue项目

此处遇到的问题:

1.代理后静态文件(.css,.js)访问不到404

2.vue项目访问后端接口访问不到

1.添加反向代理

代理名称随便取

代理目录意思为解析域名后/xxx的转发到目标URL

默认创建如下

bash 复制代码
location ^~ /system
{
    proxy_pass http://xzzzz:9002/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    
    
    set $static_filebdpe8eQS 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_filebdpe8eQS 1;
    	expires 1m;
        }
    if ( $static_filebdpe8eQS = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

添加下面配置解决静态文件404问题
注意路径后边一定要加/

bash 复制代码
location ^~ /system.*\.(js|css)?$
{
    proxy_pass http://xxxxxx:9002/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    
    
    set $static_filebdpe8eQS 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_filebdpe8eQS 1;
    	expires 1m;
        }
    if ( $static_filebdpe8eQS = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

2.更改vue项目配置

1.更改router,添加/system路径前缀

js 复制代码
export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  base:'/system'
})

2.更改打包后静态文件的访问地址添加/system路径前缀

vue.config.js
如果是vite构建的则修改base字段

3.修改反向代理配置

解决vue跨域问题

bash 复制代码
	location /prod-api/ {
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://www.xxx.com/api;
	}
相关推荐
Charlene Fung1 小时前
vs code远程自动登录服务器,无需手动输入密码的终极方案(windows版)
运维·服务器·vscode·ssh
碣石潇湘无限路1 小时前
【部署与总结】从本地运行到公网服务器的全过程
运维·服务器
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
linux修理工1 小时前
ipmitool 使用简介(ipmitool sel list & ipmitool sensor list)
运维·服务器
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
XM-54581 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js