RuoYi-Vue前后端分离版实现前后端合并

后端修改

新增模板引擎依赖

• 在ruoyi-admin模块pom文件中添加thymeleaf模板引擎

<!-- thymeleaf模板引擎 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

• 在application.yml中配置模板引擎

# Spring配置
spring:
  # 模板引擎
  thymeleaf:
    prefix: classpath:/dist/
    mode: HTML
    encoding: utf-8
    cache: false

新增页面静态化与页面控制

在ruoyi-framework模块config/ResourcesConfig中添加页面静态化控制

/**需要在上方import*/
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
	/** 原代码省略 */
    /** 页面静态化 */
    registry.addResourceHandler("/static/**").addResourceLocations("classpath:/dist/static/");
    /** 原代码省略 */
}


/**
 * 首页配置
 * @param registry
 */
@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/index").setViewName("index.html");
    registry.addViewController("/").setViewName("index.html");
    registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
}

配置静态资源访问权限

在ruoyi-framework模块config/SecurityConfig中添加静态页面访问权限
实际底下已经有一部分权限放开了，这里为了省懒，也可以加在下面一行中

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

前端修改

修改路由配置

修改 ruoyi-ui/src/router/index.js文件 ，将 mode配置改为hash
建议仅复制修改这一项，RuoYi版本迭代快可能其他配置不一致

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

修改正式环境地址

修改.env.production文件的VUE_APP_BASE_API配置为''

不要包含任何其他字符，如/,因为后面访问会影响profile等上传文件的正常访问

VUE_APP_BASE_API = ''

更新npm依赖

修改package.json中的core-js版本依赖
在当前版本前方添加一个^即可

"core-js": "^你依赖的当前版本，如:^3.37.1",

重新npm install即可

至此前后端合并就完成了

打包

通过前端命令打包资源

npm run build:prod

打包完成之后将dist目录复制到ruoyi-admin模块resources资源目录下即可

重新运行或打包项目，直接通过后端端口访问就行啦，没有后缀