部署在GitHub Pages的Vite+Tailwind静态站点JS加载失败求助

核心问题分析 #

部署后JS文件404的根本原因有两点：

1. Vite构建时未配置GitHub Pages子路径适配，导致资源路径指向根域名而非项目子路径
2. 手动在index.html中引用的本地JS文件未被Vite正确复制到构建输出目录，或路径匹配错误

解决方案步骤 #

1. 配置Vite的Base路径 #

GitHub Pages项目站点（仓库名作为子路径）需要在vite.config.js中指定base字段，匹配你的项目路径：

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/CurieNCo/', // 对应GitHub Pages的子路径：ethanrush.github.io/CurieNCo/
  // 其他现有配置...
})

注意：package.json中的homepage字段对Vite无效，Vite仅读取vite.config.js的base配置

2. 修复JS文件的引入方式 #

你当前在index.html中直接引用本地JS文件的方式，Vite默认不会自动处理这些文件的打包与复制，需二选一调整：

方案A：改用npm依赖导入（推荐）

对于第三方库（Swiper、AOS等），通过npm安装后在入口文件中导入，让Vite统一打包处理：

# 安装依赖
npm install swiper aos vanilla-counter

在src/main.js中导入所有JS（及对应CSS）：

// 第三方库
import 'swiper/swiper-bundle.min.js'
import 'aos/dist/aos.js'
import 'vanilla-counter'

// 自定义JS
import './assets/js/custom.js'

// 导入对应CSS（需同步添加）
import 'swiper/swiper-bundle.min.css'
import 'aos/dist/aos.css'

之后删除index.html中对应的<script>标签，构建后Vite会自动处理资源路径与打包。

方案B：保留手动引用，调整文件位置

如果坚持在index.html中手动引用，需将JS文件移至Vite的public目录（Vite会原封不动复制该目录下的文件到dist根目录）：

• 创建public/assets/js目录，将所有JS文件移入
• index.html中的引用路径无需修改（因为base配置会自动添加前缀）：

  <script src="assets/js/swiper-bundle.min.js"></script>
  <script src="assets/js/vanilla-counter.js"></script>
  <script src="assets/js/aos.js"></script>
  <script src="assets/js/custom.js"></script>
  

3. 验证构建与部署 #

• 本地执行npm run build，检查dist目录是否包含assets/js文件夹及对应文件
• 推送代码触发GitHub Action重新部署，访问站点后查看JS请求路径是否为https://ethanrush.github.io/CurieNCo/assets/js/xxx.js

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