若依vue项目部署步骤,避免刷新时出现404错误

Posted 孔子-说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了若依vue项目部署步骤,避免刷新时出现404错误相关的知识,希望对你有一定的参考价值。

若依是一套非常好用的框架,在使用前后端分离版本部署时,使用tomcat部署后,页面访问一切正常,但是在刷新页面的时候出现了404错误,同样的配置尝试使用nginx部署了一套,就没有出现404问题,官方文档又没有特别多的说明,特此做了一些整理。

1、环境准备

先准备应用服务器,数据库服务器,redis服务器,当然可以共用一台服务器,安装jdk、mysql、tomcat/nginx、redis等软件。版本要求如下:

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Tomcat >= 9.0
Nginx = Stable version 1.20

nginx下载地址:http://nginx.org/en/download.html

Nginx官网提供了三个类型的版本
Mainline version:Mainline 是 Nginx 目前主力在做的版本,可以说是开发版
Stable version:最新稳定版,生产环境上建议使用的版本
Legacy versions:遗留的老版本的稳定版

2、项目打包

在idea/eclipse中,使用maven命令/工具打包(war/jar),打war包需要修改pom配置,或者使用项目下bin目录中的脚本进行打包。在idea中使用maven打包后会在RuoYi-Vue\\ruoyi-admin\\target目录下生成jar/war包。

2.1 打完整jar包(包括lib)

打开RuoYi-Vue\\ruoyi-admin\\pom.xml文件,build-plugins-plugin中的spring-boot-maven-plugin即为打包插件,保持原有配置不变。打开idea右侧的maven标签,展开RuoYi-Vue(root)根目录,双击Lifecycle下的package进行打包,当然也可以在idea控制台使用 maven命令(mvn clean package)打包。 打包成功后,在RuoYi-Vue\\ruoyi-admin\\target目录下可以看到生成了jar包(ruoyi-admin.jar),该jar包较大(75M),包括了该项目依赖的所有lib包。 

使用压缩软件打开ruoyi-admin.jar,可以看到包含BOOT-INF、META-INF、org3个目录,在BOOT-INF目录下包括lib子目录,这里包括了该项目依赖的所有jar包。

2.2 打不完整jar包(不包括lib)

若每次打包都包括lib,部署拷贝文件的时候会非常慢,而且lib每次都一样,所以可以把lib包独立出来放在服务器固定目录,每次只打包不包括lib的jar包。

2.2.1 方式一:修改pom文件的打包配置

修改RuoYi-Vue\\ruoyi-admin\\pom.xml文件中的spring-boot-maven-plugin配置,打包时不再包括lib。再次打包后,ruoyi-admin.jar仅为167KB,使用压缩软件打开该jar包,在ruoyi-admin.jar\\BOOT-INF目录下仅剩下classes目录,已没有lib目录。pom打包配置如下。

<plugin>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-maven-plugin</artifactId>
     <version>2.1.1.RELEASE</version>
     <configuration>
         <fork>true</fork> <!-- 如果没有该配置,devtools不会生效 -->
         <!-- 打包去除lib配置begin -->
         <mainClass>com.ruoyi.RuoyiApplication</mainClass>
         <layout>ZIP</layout>
         <includes>
            <include>
               <groupId>nothing</groupId>
               <artifactId>nothing</artifactId>
            </include>
         </includes>
         <!-- 打包去除lib配置end -->
     </configuration>
     <executions>
         <execution>
            <goals>
               <goal>repackage</goal>
            </goals>
         </execution>
     </executions>
</plugin>

2.2.1 方式二:通过命令打包

通过命令打包,在idea工具中输入以下命令打包:mvn clean dependency:copy-dependencies -DoutputDirectory=target/lib package。

以上两种方式打包都可以,最终的jar包已经排除掉了lib文件。推荐第一种方便快捷。

2.3 打war包

1、修改RuoYi-Vue\\ruoyi-admin\\pom.xml文件,找到<packaging>jar</packaging>,修改为<packaging>war</packaging>。

2、修改RuoYi-Vue\\ruoyi-framework\\pom.xml文件,找到spring-boot-starter-web,增加排除tomcat的配置。打jar包时该配置需要去掉或注释。

<!-- SpringBoot Web容器 -->
<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <!-- 打包时排除tomcat的配置begin, 打jar包时需要注释掉-->
      <exclusions>
            <exclusion>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-tomcat</artifactId>
            </exclusion>
      </exclusions>
      <!-- 打包时排除tomcat的配置end, 打jar包时需要注释掉-->
</dependency>

3、使用idea自带工具或命令打包,在RuoYi-Vue\\ruoyi-admin\\target目录下生成了ruoyi-admin.war。部署时可以改为指定的名字,如prod-api.war。

2.4 前端打包

1、打开ruoyi-ui目录下的.env.production文件,修改VUE_APP_BASE_API = '//域名:端口/应用访问路径/',若前端应用和后端在同一个tomcat部署,VUE_APP_BASE_API = '/应用访问路径',如下图。

2、使用npm工具进行打包,打开dos窗口,进入ruoyi-ui目录,使用douyin-ui> npm run build:prod打包正式环境的前端页面,可以看到在ruoyi-ui目录下生成了dist目录,打包后若部署到tomcat,需要在dist目录下添加WEB-INF/web.xml文件,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>

3、后端部署

3.1 jar包部署

springboot已内置了tomcat容器,可以直接打jar包运行,不需要额外部署tomcat。

1、应用服务器上新建一个ruoyi目录,将打包后的jar文件放在该目录下;

2、在ruoyi目录下新建config目录,用于放置需要的配置文件,如application.yml,application-druid.yml,logback.xml等文件,修改application.yml中的redis(spring.redis)、图片存储路径(ruoyi.profile)、应用端口(server.port)、应用访问路径(server.servlet.context-path)等配置;修改application-druid.yml的数据库连接配置。

3、若部署不完整jar包,需在ruoyi目录下新建lib目录,存放该项目依赖的所有jar,可以把完整jar包解压后的lib中所有jar放入该lib目录。

4、打开dos窗口,进入该ruoyi目录,执行java -jar -Dloader.path=./lib ruoyi-admin.jar启动服务;若部署的是包括lib的完整jar包,执行命令java -jar ruoyi-admin.jar。也可以通过批处理脚本执行,在ruoyi目录下新建run-app.bat,录入以下执行脚本,保存后双击执行即可。

java -jar -Dloader.path=./lib ruoyi-admin.jar
pause

5、待服务启动成功后,通过http://域名:8789/prod-api/访问,若页面出现“欢迎使用......请通过前端地址访问。”,表示服务启动成功(也可以查看启动日志)。8789和prod-api为application.yml中定义的应用端口(server.port)和应用访问路径(server.servlet.context-path)。

配置文件放在config目录是为了以后修改端口号以及数据库连接等信息方便,直接修改yml配置文件即可,不需要重现打包jar,springboot加载配置文件顺序是
1、/config/application.yml
2、/application.yml
3、classpath:/config/application.yml
4、classpath:/application.yml

3.2 war包部署

1、将2.3打包的prod-api.war放在服务器tomcat的webapps目录下;

2、启动tomcat,根据启动日志或浏览器访问确认是否启动成功;

3、通过http://域名:8789/prod-api/访问,若页面出现“欢迎使用......请通过前端地址访问。”,表示服务启动成功。

3.3 前端部署

前端部署可以直接使用tomcat或nginx部署。

3.3.1 nginx部署

1、把2.4打包的dist文件夹放入服务器的任意目录下,如/home/www/projects/ruoyi-ui/dist;

2、在nginx配置文件中做下面的配置,此处后端的端口(8080)需要根据实际后端部署情况修改;

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    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;
        }
    }
}

3、启动nginx或者重载nginx;

4、浏览器访问http://ip:port,查看是否正常显示,如果出现登录界面并且显示验证码说明部署成功。

3.3.2 tomcat部署在ROOT下(和后端不同容器,即不用同一个tomcat)

1、通过3.1或3.2的方式部署了后端应用(假如应用路径为prod-api,ip为192.168.1.5,端口为8080),后端访问路径为http://192.168.1.5:8080/prod-api;

2、通过2.4打包的dist文件夹改名为ROOT,放在前端tomcat(假如该tomcat端口为80,所在服务器ip为192.168.1.6)的webapps目录下,前端打包的配置:.env.production文件中的VUE_APP_BASE_API为后端地址+端口+应用访问路径,例如VUE_APP_BASE_API = '//192.168.1.5:8080/prod-api';(注意: ROOT下需新建WEB-INF目录,在WEB-INF目录中需要有web.xml文件)

3、启动tomcat,浏览器访问http://ip:port,此处访问192.168.1.6,出现登录界面和验证码说明部署成功。

3.3.3 tomcat部署在ROOT下(和后端用同一个tomcat)

1、通过3.2的方式部署了后端应用(假如应用路径为prod-api,ip为192.168.1.5,端口为80),后端访问路径为http://192.168.1.5/prod-api;

2、通过2.4打包的dist文件夹改名为ROOT,放在3.2的tomcat的webapps目录下,前端打包的配置:.env.production文件中的VUE_APP_BASE_API = '/prod-api';(注意: ROOT下需新建WEB-INF目录,在WEB-INF目录中需要有web.xml文件)

3、启动tomcat,浏览器访问http://ip:port,此处访问192.168.1.6,出现登录界面和验证码说明部署成功。

3.3.4 tomcat部署在非ROOT下(假设前端部署的项目名是admin

1、前端打包配置,如果后端和前端在同一个tomcat下,需要修改.env.production文件中的VUE_APP_BASE_API为后端的项目名,例如VUE_APP_BASE_API = '/prod-api',若后端和前端不在同一个tomcat下,也就是单独部署vue,则修改.env.production文件中的VUE_APP_BASE_API为后端地址+端口+应用访问路径,例如VUE_APP_BASE_API = '//192.168.1.5:8080/prod-api';

2、修改vue.config.js下的publicPath,例如:publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/", 这里根据我们部署的后端项目名决定,这个影响资源文件的引用;

3、router/index.js下添加base: "/prod-api",如下

export default new Router({
  base: "/admin",
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

4、Navbar.vue中的退出方法里location.href = '/index';改为location.href = this.$router.options.base + '/index';

5、将前端打包,命令:npm run build:prod,将dist(默认的)目录放在服务器tomcat的webapps下,将dist重命名为admin;

6、在server.xml中加入Host节点下添加:<Context docBase="admin" path="/admin/" reloadable="true" source=""/>

7、在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>

8、启动tomcat,浏览器访问http://ip:port/admin,出现登录界面和验证码说明部署成功

4、相关资源

4.1 框架地址

https://gitee.com/y_project/RuoYi-Vue

4.2 文档地址

https://doc.ruoyi.vip/ruoyi-vue/

4.3 issues

https://gitee.com/y_project/RuoYi-Vue/issues

以上是关于若依vue项目部署步骤,避免刷新时出现404错误的主要内容,如果未能解决你的问题,请参考以下文章

Nuxt 应用程序在部署到现在时在刷新时出现 404 错误

服务器部署—若依vue如何部署到nginx里面?nginx刷新页面404怎么办?完美解决建议收藏

Nginx:vue路由使用history模式刷新404

重新加载/刷新操作时出现 Nextjs 404 错误

使用 Angular 7、NGINX 和 Docker 刷新页面时出现 404 错误

页面刷新时出现Amazon AWS S3 404错误