在 Netlify 上部署 Vue.js 后页面刷新和重定向出现 404 错误问题

Question

在 Netlify 上部署 Vue.js 应用程序后刷新页面或尝试导航时，我遇到 404 错误的问题。在开发上工作正常下面是我正在使用的路由代码：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: () => import('../views/About.vue')
        },
        {
            path: '/register',
            component: () => import('../views/Register.vue')
        },
        {
            path: '/login',
            component: () => import('../views/Login.vue')
        },
        {
            path: '/todo',
            component: () => import('../views/ToDo.vue')
        },
        {
            path: '/faq',
            component: () => import('../views/FAQ.vue')
        },
        {
            path: '/tickets',
            component: () => import('../views/Tickets.vue')
        },
        {
            path: '/new-ticket',
            component: () => import('../views/CreateTicket.vue')
        },
        {
            path: '/policy',
            component: () => import('../views/Policy.vue')
        },
        {
            path: '/terms',
            component: () => import('../views/Terms.vue')
        },
        {
            path: '/chat',
            component: () => import('../views/Chat.vue')
        },
        {
            path: '/reset',
            component: () => import('../views/resetPassword.vue')
        },
        {
            path: '/resetpassword/',
            component: () => import('../views/resetPassword.vue')
        },
        {
            path: '/user',
            component: () => import('../views/CurrentUserPAge.vue')
        },
        {
            path: '/user-menu',
            component: () => import('../views/UserMenu.vue')
        },
        {
            path: '/set-new-password',
            component: () => import('../views/setNewPassword.vue')
        },
        {
            path: '/notification',
            component: () => import('../views/notification.vue')
        },
        {
            path: '/admin',
            component: () => import('../views/adminPanel.vue')
        },
        {
            path: '/user-edit/:id',
            component: () => import('../views/userEdit.vue')
        }
    ]
});
export default router;

我尝试创建路线文件，像这样更改路线：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: Home
        },
     

任何有关如何解决此问题的见解或建议将不胜感激。谢谢！

Answer 1

解决方法：

在项目根目录下创建netlify.toml。

并在netlify.toml文件中添加以下代码

    from = "/*"
    to = "/index.html"
    status = 200