部署Vite React应用至GitHub Pages后JS资源加载失败求助

1. 配置Vite基础路径 #

在项目根目录的vite.config.js中添加base配置，值为你的GitHub仓库名称（比如你的仓库名是Asset-guard）：

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

export default defineConfig({
  plugins: [react()],
  base: '/Asset-guard/' // 替换为你的GitHub仓库名称
})

2. 统一index.html中的资源路径 #

• 移除所有本地资源路径中硬编码的Asset-guard/前缀，改用相对路径（Vite会自动拼接base路径）
• 示例修正：
  • 原错误脚本路径：<script src="Asset-guard/plugins/jquery/jquery.min.js"></script>
  • 修正后：<script src="plugins/jquery/jquery.min.js"></script>
  • 样式路径同理，比如原<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">保持相对路径即可，无需修改

3. 确保静态资源被正确打包 #

将AdminLTE的plugins/、css/等静态资源文件夹移动到项目的public目录下。Vite会在打包时将public目录下的文件原封不动复制到dist目录根目录，保证资源路径匹配。

4. 验证部署命令 #

在package.json中确认部署相关脚本配置：

{
  "scripts": {
    "build": "vite build",
    "deploy": "gh-pages -d dist"
  }
}

执行npm run build打包后，再执行npm run deploy部署到GitHub Pages。

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