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