框架地址: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 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