vue.js 前端 Vue项目打包至Spring Boot项目运行

准备vue项目

如果你的Vue.js应用程序使用了Vue Router的history模式，并且将其嵌入到Spring Boot应用程序中，你需要进行一些额外的配置，以确保前端路由正常工作。在Vue Router的history模式中，前端路由使用正常的URL，而不带有哈希标识符（#）。

使用history模式时做如下配置，base为Srping Boot的根目录，默认为"/"，使用hash模式时可忽略以下配置。

const router = new VueRouter({

mode: 'history',

base: '/your-app-context-path', // 与Spring Boot根URL匹配

routes: [

// 定义你的路由

],

});

打包Vue项目

执行打包命令生产dist目录，里面包含生产的静态资源。

npm run build

复制Vue.js静态资源到Spring Boot项目： 将Vue.js构建后的静态资源（通常在dist目录中）复制到Spring Boot项目的资源目录，例如将它们放在src/main/resources/static目录下。

配置Spring Boot来处理前端路由

在Spring Boot应用程序中，配置一个控制器来处理前端路由。这确保前端路由正常工作，而不导致404错误。

创建一个控制器类如下：

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

public class SpaController {

@RequestMapping(value = "/{path:[^\\.]*}")

public String forward() {

return "forward:/index.html";

}

}

启动Spring Boot应用程序

打开浏览器，访问Spring Boot应用程序的URL。你应该能够看到Vue.js前端应用程序在Spring Boot应用程序内运行，并且前端路由正常工作。

参考文章