Vue3刷新页面报错404解决方法

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
892 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注