vue 路由history模式刷新页面404问题

原因:
vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下浏览器会直接去服务器找这些地址,导致服务器没有对应的页面地址而报404。
解决方法:

第一步:
前端项目中修改项目的base路径,这里我设置为main

在这里插入代码片
const router = createRouter({
  history: createWebHistory('/main'),
  routes: routes,
});

第二步,修改nginx配置
增加location配置,与项目中配置的名称一致,try_files 后面的文件名也要与名称一致
vue 路由history模式刷新页面404问题_第1张图片
重启运行就可以了!

你可能感兴趣的:(vue.js,前端,javascript)