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