Vue-router构建后除主路径外均404问题求助

核心问题分析 #

开发环境正常但部署后子路由404，主要是两个原因：

1. 路由History模式的Base配置不匹配：vite.config.js已设置base: "/katriumweb/"，但路由创建时未同步传入base参数，且路由路径重复添加了/katriumweb/前缀，导致路径解析冲突。
2. 服务器未配置SPA fallback：Vue Router的history模式下，直接访问子路由或刷新页面时，服务器会尝试寻找对应物理文件，找不到就返回404，必须配置将所有请求转发到index.html。
3. 额外提示：crbug/1173575是Chrome浏览器的非关键警告，和404问题无关，可直接忽略。

具体修复步骤 #

1. 修正路由配置 #

修改router/index.js，同步base参数并清理重复路径前缀：

import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '../stores/AuthStore';

// 传入与vite.config.js一致的base路径
const router = createRouter({
    history: createWebHistory("/katriumweb/"),
    routes: [
        {
            path: "/login", // 移除/katriumweb/前缀
            name: "login",
            component: () => import("@/views/Login.vue")
        },
        {
            path: "/playground",
            name: "playground",
            component: () => import("@/views/Playground.vue")
        },
        {
            path: "/",
            name: "home",
            component: () => import("@/views/Home.vue"),
            meta: {
                authRequired: true
            }
        },
        {
            path: "/vehicleupdate",
            name: "vehicleupdate",
            component: () => import("@/views/workflows/VehicleUpdate.vue"), // 修复多余斜杠
            meta: {
                authRequired: true
            }
        }
    ],
});

router.beforeEach(async (to, from, next) => {
    const authStore = useAuthStore();
    let token = authStore.user? authStore.user.TOKEN : false;
    
    const checkToken = await fetch("*******", {
        method: "GET",
        headers: {
            "Token": `${token}`
        }
    })

    if (to.meta.authRequired) {
        if (!checkToken.ok || !token) {
            localStorage.clear();
            next("/login"); // 移除/katriumweb/前缀
        } else {
            next();
        }
    } else {
        next();
    }
})

export default router;

2. 配置服务器SPA Fallback #

根据你的服务器类型添加对应配置：

• Nginx：在站点配置中添加

location /katriumweb/ {
    try_files $uri $uri/ /katriumweb/index.html;
}

• Apache：在项目根目录创建.htaccess文件

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /katriumweb/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /katriumweb/index.html [L]
</IfModule>

• Netlify：创建_redirects文件

/katriumweb/* /katriumweb/index.html 200

• Vercel：创建vercel.json文件

{
  "routes": [
    { "src": "/katriumweb/(.*)", "dest": "/katriumweb/index.html" }
  ]
}

3. 其他检查项 #

• 确保vite.config.js的base配置与服务器部署路径完全一致
• 确认构建后的文件已正确上传到服务器的/katriumweb/目录下

内容的提问来源于stack exchange，提问作者Will Galvão