准备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应用程序内运行,并且前端路由正常工作。