Vite构建React项目.htaccess路由重写后资源加载404问题

针对你遇到的URL重写后资源加载404问题，这里有三个可行的解决思路，兼顾路由映射和资源路径解析：

1. 配置Vite的base绝对路径（推荐） #

在项目根目录的vite.config.js中，设置base为你的部署子目录绝对路径（比如你的项目部署在/project/下）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/project/' // 核心配置，指定资源加载的基准路径
})

重新构建项目后，Vite生成的资源路径会变成绝对路径（比如/project/assets/index-CVjGBOj5.css），不管当前URL是/project/edit/xxx还是直接访问/project/index.html，资源都会从正确的位置加载。

2. 在.htaccess中添加资源路径重写规则 #

不需要修改项目代码，直接在现有.htaccess规则前添加资源重写规则，把/edit/assets/开头的请求转发到实际的/assets/目录：

# 优先处理资源请求，避免路由规则拦截
RewriteRule ^edit/assets/(.*)$ assets/$1 [L]

# 原有的页面路由重写规则
RewriteRule ^edit/([0-9a-f]+)$ index.html?content=editor&shid=$1 [L,QSA]

这样当浏览器请求/project/edit/assets/xxx.js时，服务器会自动转发到/project/assets/xxx.js，从正确的位置读取资源文件。如果还有其他类似的路由前缀（比如/view/xxx），只需要复制第一条规则替换前缀即可。

3. 在HTML中添加<base>标签 #

在项目index.html的<head>标签内添加<base>，指定所有相对路径的基准URL：

<head>
  <!-- 其他meta、title等 -->
  <base href="/project/">
</head>

这个标签会让页面中所有相对路径（比如./assets/xxx.js）都以/project/为基准解析，最终变成/project/assets/xxx.js，解决路径解析错误的问题。但要注意如果项目部署路径变更，需要手动修改这个标签的值。

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