vue3项目部署到服务器刷新页面就404

发布时间 2023-08-04 14:21:37作者: 幻影之舞

本地项目调的好好的,刷新也没有毛病,扔到服务器上,第一次打开是正常的,再刷新下就404了,不知道什么原因。百度了下才发现问题所在

 

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'login',
            component: () => import("@/pages/Login.vue")
        },
        {
            path: '/moduleManagement',
            name: '模块管理',
            component: management,
            children: [
                {
                    path: '/moduleManagement',
                    name: '模块管理',
                    component: () => import("@/views/module/index.vue")
                },
            ],
            meta: {
                requireAuth: true
            }
        },
  ]
})

问题所在: vue-router历史模式的问题: vue3中历史模式默认改为了HTML5模式:createWebHistory()

解决办法: createWebHistory 换成 createWebHashHistory, 将历史模式由当前的HTML5模式改为Hash模式

当使用这种历史模式时,URL 会看起来很 "正常",例如 https://example.com/user/id。 不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 Https://example.com/user/id,就会得到一个 404 错误。 这就是一直折磨我的罪魁祸首!

重启项目,部署服务器,问题解决!