RuoYi-Vue项目部署流程
RuoYi-Vue项目部署
项目地址
部署成果
后端部署
jar部署
war部署
前端部署
使用nginx部署
tomcat部署
部署在ROOT下（单独占用容器）
部署在ROOT下（和后端同一容器）
部署在非ROOT下
项目地址
框架地址：https://gitee.com/y_project/RuoYi-Vue
文档地址：https://doc.ruoyi.vip/ruoyi-vue/
issues：https://gitee.com/y_project/RuoYi-Vue/issues
部署成果
后端部署
可以使用idea或者eclipse或者项目下bin目录中的脚本进行打包（war / jar），打包时有几点需要注意：
logback.xml文件中的路径建议改为./logs
application.yml中的profile需要改为服务器存在的真实路径
jar部署
因为springboot中已经内置了tomcat或者其他容器，不需要另外部署tomcat，按照下面步骤操作：
将打包后的jar文件放在任意一个位置；
在服务器上和jar同一个目录下新建一个config目录，将项目里的application-druid.yml、application.yml或者其他yml配置文件复制出来，放入config目录；
执行命令启动：nohup java -jar ruoyi-admin.jar
也可以加更多的启动参数，如果是linux也可以把项目下的ry.sh放在jar同级目录下，修改ry.sh里的AppName和相关路径，执行./ry.sh start即可启动
脚本使用方法
启动：./ry.sh start
停止：./ry.sh stop
重启：./ry.sh restart
状态：./ry.sh status
可以查看启动日志或者使用curl或者浏览器访问是否已经启动，访问地址：http://ip:port，如果返回{"msg":"请求访问：/，认证失败，无法访问系统资源","code":401}，证明部署成功；
—说明
放在config目录是为了以后修改端口号以及数据库连接等信息方便，直接修改yml配置文件即可，不需要重现打包jar，因为springboot加载配置文件顺序是
1、/config/application.yml
2、/application.yml
3、classpath:/config/application.yml
4、classpath:/application.yml
注意：这些文件或者目录是根据命令发起目录来的，假如脚本或命令是在admin目录下执行，而jar文件是在admin/target目录下，则需要将config/xxx.yml文件及目录放在admin目录下
war部署
将打包后的war文件，放在服务的webapps下，可以使用解压缩软件解压（war其实就是个压缩包），解压后将文件夹重命名为ROOT，如果需要带项目有也可以配置为其他名称，更多tomcat配置这里不再赘述；
启动tomcat，可以查看启动日志或者使用curl或者浏览器访问是否已经启动，访问地址：http://ip:port，如果返回{"msg":"请求访问：/，认证失败，无法访问系统资源","code":401}，证明部署成功；
前端部署
前端部署可以使用nginx部署或者直接使用tomcat部署。
使用nginx部署
将前端打包，命令：npm run build:prod，将dist（默认的）目录放在服务器的任意一个文件夹下，比如这里放在/home/www/projects/ruoyi-ui
在nginx配置文件中做下面的配置，此处后端的端口（8080）需要根据实际后端部署情况修改
server {
listen 80;
server_name localhost;
location / {
root /home/www/projects/ruoyi-ui/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
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:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
启动nginx或者重载nginx
浏览器访问http://ip查看是否正常显示，如果出现登录界面并且显示验证码说明部署成功
tomcat部署
一般情况下使用nginx部署，但是有些时候也有人使用tomcat部署，按照下面的流程进行：
部署在ROOT下（单独占用容器）
注意：这里不需要在server.xml下增加HOST节点
如果你的后端和前端不在同一个tomcat下，也就是单独部署vue，那就需要修改.env.production文件中的VUE_APP_BASE_API为你后端地址+端口，例如VUE_APP_BASE_API = '//localhost:8080'
将前端打包，命令：npm run build:prod，将dist（默认的）目录放在服务器tomcat的webapps下，将dist重命名为ROOT
在ROOT下新建WEB-INF目录，在WEB-INF目录中新建web.xml文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
最终效果如下图：
启动tomcat，浏览器访问http://ip:port，出现登录界面和验证码说明部署成功
部署在ROOT下（和后端同一容器）
注意：这里不需要在server.xml下增加HOST节点
如果你的后端和前端在同一个tomcat下，那就需要修改.env.production文件中的VUE_APP_BASE_API为你后端的项目名，例如VUE_APP_BASE_API = '/prod-api'，其中prod-api就是你的后端项目名，部署方法可以参考上面的后端部署-war部署
将前端打包，命令：npm run build:prod，将dist（默认的）目录放在服务器tomcat的webapps下，将dist重命名为ROOT
在ROOT下新建WEB-INF目录，在WEB-INF目录中新建web.xml文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
最终效果如下图：
启动tomcat，浏览器访问http://ip:port，出现登录界面和验证码说明部署成功
部署在非ROOT下
这里部署的项目名是admin
如果你的后端和前端在同一个tomcat下，那就需要修改.env.production文件中的VUE_APP_BASE_API为你后端的项目名，例如VUE_APP_BASE_API = '/prod-api'，其中prod-api就是你的后端项目名；如果你的后端和前端不在同一个tomcat下，也就是单独部署vue，那就需要修改.env.production文件中的VUE_APP_BASE_API为你后端地址+端口，例如VUE_APP_BASE_API = '//localhost:8080'。
修改vue.config.js下的publicPath，例如：publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/", 这里根据你部署的项目名决定，这个影响资源文件的引用
router/index.js下添加base: "/admin",，如下
export default new Router({
base: "/admin",
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
1
Navbar.vue中的退出方法里location.href = '/index';改为location.href = this.$router.options.base + '/index';
将前端打包，命令：npm run build:prod，将dist（默认的）目录放在服务器tomcat的webapps下，将dist重命名为admin
在server.xml中加入Host节点下添加：<Context docBase="admin" path="/admin/" reloadable="true" source=""/>
在admin下新建WEB-INF目录，在WEB-INF目录中新建web.xml文件如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
启动tomcat，浏览器访问http://ip:port/admin，出现登录界面和验证码说明部署成功
其他配置方式可以自己参考上面的方式尝试，需要注意的点：
1、tomcat项目名路径配置
2、vue静态资源路径配置相应和项目名一致
————————————————
版权声明：本文为CSDN博主「Mr.李大哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014440968/article/details/115753615