作者:百变靓丽 | 来源:互联网 | 2023-08-26 18:17
项目场景:
Maven是一个项目管理工具,可以对 Java 项目进行构建、依赖管理。Maven 也可被用于构建和管理各种项目,例如 C#,Ruby,Scala 和其他语言编写的项目。那么我们也可以使用他构建一个前后端打包为一个jar包的项目。
使用的技术为 Spring Boot
+ Vue
, 使用 Maven
进行打包。
使用vue-router
进行路由管理:Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
问题描述:
在 vue
和 Spring boot
使用Maven工具进行打为jar包后
本地运行jar 或 部署至服务器 时,出现vue前端界面刷新404情况
原因分析:
Vue Router History 模式 介绍
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL
改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成
URL 跳转而无须重新加载页面。
但是在我的这个项目结构中,是把他们打包出来运行的,
在history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件(即这个路径是走不通的),就会返回404,
所以我们要在vue项目的vue.config.js
文件中进行配置。
解决方案:
在vue项目的vue.config.js
文件中增加以下配置:
historyApiFallback: {
index: '/index.html'
},
具体如下:
module.exports = {
outputDir: 'dist',
assetsDir: '',
lintOnSave: false,
publicPath: '/',
devServer: {
open: true,
host: "localhost",
port: '8080',
historyApiFallback: {
index: '/index.html'
},
}
}