Netlify部署Vite+Vue项目遇Profile页面404问题求助

• 问题原因：Netlify作为静态文件托管服务，直接访问前端路由路径（如/profile）时，服务器会尝试寻找对应静态文件，但Vue Router的history模式下所有路由逻辑由前端处理，因此返回404错误。

• 具体解决步骤：

  1. 通过配置文件设置重写规则
     在项目根目录创建_netlify.toml文件，添加以下内容：

     [[redirects]]
       from = "/*"
       to = "/index.html"
       status = 200
     

     将该文件提交到代码仓库，触发Netlify重新构建部署。
  2. 或通过Netlify后台配置
     登录Netlify控制台，进入对应项目的Site settings > Build & deploy > Redirects and rewrites，添加一条重写规则：
     • 源路径：/*
     • 目标路径：/index.html
     • 状态码：200
  3. 确认Vue Router模式
     检查router/index.js中的路由配置，确保使用history模式：

     import { createRouter, createWebHistory } from 'vue-router'
     
     const router = createRouter({
       history: createWebHistory(import.meta.env.BASE_URL),
       routes: [
         // 你的路由配置项
       ]
     })
     

  4. 校验Vite的base路径配置
     打开vite.config.js，确认base参数配置正确（根路径部署设为'/'，子路径部署需对应修改）：

     export default defineConfig({
       base: '/',
       // 其他Vite配置
     })
     

内容的提问来源于stack exchange，提问作者Mat