项目不是部署在根目录下时，index跳转404页面

写程序的吗喽

于 2024-08-28 19:38:16 发布

阅读量343

点赞数 1

文章标签：前端 javascript html vite

本文链接：https://blog.youkuaiyun.com/Yana1225/article/details/141648185

版权

背景：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')
    }
  ]
})