Springboot整合Vue
-
分别创建一个Vue项目(idea默认项目即可)和Springboot项目,保证项目可运行
-
在VUE项目中运行npm run build
-
build完成后会在对应目录下生成dist文件夹
-
在springboot项目中resource下创建static和templates文件夹
-
把dist文件夹目录下的文件放到springboot项目底下的resource/static目录底下
-
此时访问本地项目地址下的index方法
@Controller
public class TestController {
@Autowired
private TestServiceImpl testService;
@RequestMapping("/index")
public String index() {
return "index";
}
}
编辑
报错处理
-
此时如果出现以下报错:
编辑
-
在spring boot项目pom中引入依赖,load maven(刷一下),重启项目
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
报错处理
-
此时如果出现index页面空白,查看控制台报错js与css404,需要对前端打包进行配置:
前端修改
Vue2.0的打包配置:编辑config/index.js
const path = require( 'path' )
module.exports = {
build: {
index: path.resolve(__dirname, 'dist/index.html' ),
assetsRoot: path.resolve(__dirname, 'dist' ),
assetsSubDirectory: 'static' ,
assetsPublicPath: './' ,
productionSourceMap: true
},
......
}
Vue3.0的打包配置:编辑vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : './',
outputDir: 'dist',
assetsDir: 'static',
......
}
重新build前端项目:(新生成的文件内部不一样,重新按照之前的方式以及层级拷贝到springboot项目)
npm run build
后端修改
在config包下创建SpringWebMvcConfig类
@Configuration
public class SpringWebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}
重启springboot项目重新访问index方法,就能打开vue项目中localhost:8080对应的页面