RuoYi-Vue前后端分离版实现前后端合并
文章目录
- 后端修改
- 新增模板引擎依赖
- 新增页面静态化与页面控制
- 配置静态资源访问权限
- 前端修改
- 修改路由配置
- 修改正式环境地址
- 更新npm依赖
- 打包
后端修改
新增模板引擎依赖
- 在
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: HTMLencoding: utf-8cache: 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资源目录下即可
重新运行或打包项目，直接通过后端端口访问就行啦，没有后缀
