Springboot整合Vue步骤以及遇到的问题

最新推荐文章于 2024-07-06 20:20:43 发布

qq_34286744

最新推荐文章于 2024-07-06 20:20:43 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/qq_34286744/article/details/132085969

版权

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对应的页面