如何确保electron-vite/rollup使用绝对路径引用编译资源？

1. 强制Vite输出绝对路径的资源 #

修改你的vite.config.js，明确配置根路径和Rollup输出规则，确保所有打包后的资源都使用根路径开头的绝对路径：

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

export default defineConfig({
  plugins: [react()],
  base: '/', // 固定为根路径
  build: {
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        // 强制所有资源输出到assets目录，并用绝对路径引用
        assetFileNames: 'assets/[name]-[hash][extname]',
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js'
      }
    }
  }
})

配置完成后重新执行npm run build，此时打包后的HTML里的资源引用会变成/assets/xxx.js这种绝对路径，不会随路由层级变化。

2. 配置Vercel的SPA路由规则 #

仅修复资源路径还不够，Vercel默认会把深层路径（如/app/transfers/id）当作独立文件查找，导致返回404。需要在vercel.json中添加重写规则，让所有路径都指向index.html：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

这个配置会让Vercel不管用户访问哪个路径，都返回根目录的index.html，确保React Router能接管路由逻辑。

3. 检查自定义HTML模板（如果有） #

如果你使用了自定义的index.html模板，确保里面的资源引用没有硬编码相对路径。比如不要写：

<script type="module" src="./assets/main.js"></script>

而是改为绝对路径：

<script type="module" src="/assets/main.js"></script>

Vite打包时会自动替换为带哈希的文件名，无需手动维护。

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