网上有很多关于ruoyi前后端分离项目配置到nginx服务器的案例, 一般情况下都可以成功, ruoyi这个框架确实已经很智能了.

例如这篇:

云服务器部署前后端分离项目(若依)详细教程_若依前端部署_萌褚的博客-CSDN博客

但是没有一篇是关于SpringBoot项目修改context-path:之后部署到nginx上面的文章

例如:

 

当我将context-path的默认路径修改之后,再部署,就会出现问题了.下面我来介绍了一下我是如何解决的.我配置的SpringBoot端口是8118,这个在后续有用.

 首先SpringBoot启动没问题,按照上面的教程肯定是可以运行成功.

1 主要是修改vue的配置

  • 1 找到vue.config.js文件.将21行的代码,第一个/修改为SpringBoot配置的context-path,注意,要打两个斜杠/cnAdminRy/
  publicPath: process.env.NODE_ENV === "production" ? "/cnAdminRy/" : "/",

 2 修改nginx.conf文件

例如我监听的端口是3000,那么我的配置如下

server {
        listen       3000;
		server_name  localhost;
		root    F:\02html\cn-ruoyi-admin\dist; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
		
		# 配置ruoyi前后端分离时访问的后端接口代理。
		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://localhost:8118/cnAdminRy/; #后台项目的运行端口
		}
 
 
    }

 这样配置就可以了,主要代码是

proxy_pass http://localhost:8118/cnAdminRy/; #后台项目的运行端口

如果不行,你来找我.

Logo

快速构建 Web 应用程序

更多推荐