背景:vue3的项目开发,部署到测试环境后,页面总是直接跳转到404,本地模拟部署线上环境没问题,模拟部署测试环境后,复现了问题。
解决方案:router/index.js中需要进行配置
vue2的配置
const router = createRouter({
// createWebHistory中必须添加参数process.env.BASE_URL
history: createWebHistory(process.env.BASE_URL),
routes: [{
path: "/",
name: "Home",
component: Index,
children: [
...
]
},
{
path: '/:pathMatch(.*)/',
component: 404
}
],
scrollBehavior(to, from, savedPosition) {
(to.path !== from.path) && (document.getElementById('main').scrollTop = 0)
}
})
vue3的配置
const router = createRouter({
// createWebHistory中必须配置参数import.meta.env.BASE_URL
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: () => import('../pages/index.vue'),
},
...,
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/404.vue')
}
]
})