If the front-end resources are separated from the back-end, how to package the front-end resources, integrate them into the back-end, and package them with the back-end to form a jar, which is relatively simple during deployment. However, this is generally not recommended. Since the front-end and back-end separation architecture is used, separation deployment is a better solution. What should we do for this niche demand?

1, Premise preparation

Before reading the tutorials in this chapter, you need to make sure that the previous back-end separation framework can run successfully on the local computer.
If you haven't already run, you can refer to previous tutorials: Teach you how to start the front and back separation project

2, Front end configuration modification

1. Modify. env.production in ruoyi UI (one of two)

// Native address access
VUE_APP_BASE_API = '/'

// Any address access
VUE_APP_BASE_API = '//localhost:8080'

2. Modify router/index.js in ruoyi UI and set the mode attribute to hash

export default new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

3, Package front-end resources

The first method: execute bin\build.bat to package the front-end static resource file.
Method 2:
Just execute the following command in the front and back directory root path.

npm run build:prod

After packaging, a dist directory folder will be generated in the project directory

4, Backend configuration modification

1. Modify the application.yml in the backend resources and add the thymeleaf template engine configuration

spring:
  # template engine
  thymeleaf:
    mode: HTML
    encoding: utf-8
    cache: false

2. Modify pom.xml under the back-end ruoyi admin module and add thymeleaf template engine dependency

Note: the dependency cannot be placed in the root directory, otherwise an error will be reported, resulting in failure.

<!-- spring-boot-thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3. Modify addResourceHandlers in backend ResourcesConfig.java and add static resource mapping addresses

/** Front end static resource configuration */
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");

4. Modify the configure in the backend SecurityConfig.java and add the allowed access addresses.

.antMatchers(
       HttpMethod.GET,
       "/*.html",
       "/**/*.html",
       "/**/*.css",
       "/**/*.js",
       "/profile/**",
       "/static/**",
       "/",
       "/index"
).permitAll()

5. The backend creates a new access control processing IndexController.java and sets the corresponding access page.

package com.ruoyi.web.controller.system;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController
{
    // System home page
    @GetMapping(value = { "/", "/index", "/login" })
    public String index()
    {
        return "index";
    }
}

6. Consolidate front-end dist static resource files to the back-end

Create a new templates directory under the backend resources and copy the static page index.html.
Copy the static file static to the resources directory.

5, Start project

Run the RuoYiApplication.java startup class to start the project
Then visit: http://localhost:8080/

After testing, you can log in normally.

6, Package project

For convenience, we only demonstrate the method of playing jar package here. For the method of playing war, please refer to the previous tutorials.
The first method: directly execute the package command in the IDEA to package, or you can choose to package at the same time.

The second method: find package.bat in the bin directory of the project and double-click to execute to package.
After the package command is executed, you can see the packaged files in the target directory under the ruoyi admin module.

7, Start test

We use the packaged jar package to run the test to see if there is a problem.
Directly by command:

# Start command
java -jar ruoyi-admin.jar

8, Simple summary

After testing, we can still access it normally. So far, this tutorial is over. If you have any problems, please leave the problems you encounter in the comment area.