Vue3刷新页面报错404解决方法
由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://xxxx.com/xxx/xx
,就会得到一个 404 错误。 这就是罪魁祸首!而实际地址则 https://xxxx.com/#/xxx/xx
解决办法 将原来的 createWebHistory改成 createWebHashHistory
修改原来的路由文件 router / index.js
const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), //新的 《《《《《《 // history: createWebHistory(process.env.BASE_URL), //默认 routes })
完整文件:
import { createRouter, createWebHashHistory // createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'login', component: () => import('../views/HomeLogin.vue') }, { path: '/home', name: 'home', component: () => import('../views/HomeView.vue') }, ] // 创建路由 const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), //新的 《《《《《《 // history: createWebHistory(process.env.BASE_URL), //默认 routes }) // 输出对象 export default router
912 Views