vue项目刷新后页面404,vue报404错误
主要介绍Vue3刷新页面错误404的解决方法，通过示例代码详细介绍，有一定的参考价值。感兴趣的朋友可以参考一下。
vue-router历史模式
最近在学习Vue3的过程中遇到了一个问题，就是在编写代码的过程中，每当代码发生变化，页面刷新时，原来的页面就会变成这样：
打开控制台看一看：
这时候直接在浏览器地址栏刷新输入地址是不行的。每次写一点代码，都不能及时看到结果。需要从8080重新进入，崩溃可想而知。此时应该是路由跳转的问题，于是我去router.js文件看了一下：
导入{
创建路由器，
创建网页历史
}来自“vue路由器”
//从导入主目录./views/Home.vue
const Home=()=import(./views/Home/Home’)；
常量类别=()=导入(./视图/类别/类别’)；
const Detail=()=import(./视图/细节/细节’)；
const Profile=()=import(./views/Profile/Profile )；
const Shopcart=()=import(./views/shop cart/shop cart )；
恒定路线=[{
路径：“/home”，
姓名：家，
成分：家，
元：{
书名：《书兄弟》
}
},
{
路径：“/”，
名称：默认，
成分：家，
元：{
书名：《书兄弟》
}
},
{
路径：“/类别”，
名称：“类别”，
组件：类别，
元：{
标题：“商品分类”
}
},
{
路径：“/detail”，
名称：详细信息，
组件：细节，
元：{
标题：“商品详情”
}
},
{
路径：“/profile”，
名称：“个人资料”，
组件：配置文件，
元：{
标题：“个人中心”
}
},
{
路径：“/购物车”，
名称：“购物车”，
组件：购物车，
元：{
标题：“购物车”
}
},
]
const router=createRouter({
history:createWebHistory(process . env . base _ URL)，
路线
})
router.beforeEach((收件人，发件人，下一个)={
//如果您没有登录，请转到登录
next()；
document . title=to . meta . title；
})
导出默认路由器
我觉得这没什么不好。我仔细检查了自己写的那部分代码，没发现什么问题，就更加疑惑了。自动生成的代码有问题吗？经过彻底调查，发现原来的问题是vue-router的历史模式：vue3中的历史模式默认改为HTML5模式：createWebHistory()
当使用这种历史模式时，网址看起来很正常，比如https://example.com/user/id.但问题就在这里。因为我们的应用程序是一个单页面的客户端应用程序，如果没有适当的服务器配置，用户在浏览器中直接访问https://example.com/user/id时会得到一个404错误。这就是一直折磨我的罪魁祸首！
Vue-router给出的官方解决方案是：
要解决这个问题，您需要做的就是向您的服务器添加一个简单的备用路由。如果URL不匹配任何静态资源，它应该提供与应用程序中的index.html相同的页面。
这涉及到服务器的配置。因为我的项目还在开发阶段，这个方案暂时不能用。好在还有其他的解决方案，就是把历史模式从现在的HTML5模式改成Hash模式：
从“vue-router”导入{ createRouter，createWebHashHistory }
const router=createRouter({
history: createWebHashHistory()，
路线：[
//.
],
})
在代码中，将两个createWebHistory替换为createWebHashHistory，从而完成修改。
修改后重新启动项目：
npm运行服务
此时，刷新页面不会报告404，您就大功告成了！
详细解决方案请移至vue-router官网“不同历史记录型号”栏目：router.vuejs.org/zh/guide/essentials/history-mode.html
这就是这篇关于Vue3刷新页面404错误解决方案的文章。有关Vue3刷新页面上的错误404的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。