JavaScript 文件未加载到 GitHub 页面站点（Vite、TailWindCSS）

Question

我有一个静态站点，使用 Vite 和 Tailwind 部署在 github 页面上。 这是存储库。 这是 gh 页面链接：https://ethanrush.github.io/CurieNCo/

在本地，当我跑步时

npm run dev 

一切正常，我的网站可以正确加载所有 JS。

当我按照部署静态站点的 Vite 文档在 github 页面上部署时。 JavaScript 未加载。

如果我检查 JS 尝试加载的 URL：

https://ethanrush.github.io/CurieNCo/assets/js/custom.js 我收到 404 错误。

这就是脚本在index.html中的引用方式：

    <!-- Swiper Slider JS -->
    <script src="assets/js/swiper-bundle.min.js"></script>
    <!-- Counter Js -->
    <script src="assets/js/vanilla-counter.js"></script>
    <!-- AOS Animation JS -->
    <script src="assets/js/aos.js"></script>
    <!-- Custom Js -->
    <script src="assets/js/custom.js"></script>

这是 github 页面上使用的部署操作。来自Vite文档

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

图像都已正确加载，如果我到达它们所在的 URL：

https://ethanrush.github.io/CurieNCo/assets/我没有收到 404。只有 JS 文件夹显示 404 错误。

在我的 github 存储库中，assets 文件夹中有一个 JS 文件夹，其中包含我的所有 js 文件。我认为路径不正确，但我不确定为什么它适用于图像而不适用于 js。

我尝试更改 package.json 中的主页 url，但这并没有解决问题。它按预期更改了资产的 url，但如果我单击这些链接，我仍然会收到 404 错误。

我的预感是它可能与构建操作中的 dist 存储库的路径有关。但我完全不确定这是什么或者在这种情况下应该设置在哪里。

Answer 1

如果您查看构建日志，您会看到一些警告：

<script src="assets/js/swiper-bundle.min.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="assets/js/vanilla-counter.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="assets/js/aos.js"> in "/index.html" can't be bundled without type="module" attribute
<script src="assets/js/custom.js"> in "/index.html" can't be bundled without type="module" attribute

由于这些资产无法捆绑，因此它们不包含在部署到 GitHub 页面的

dist

 文件夹中。

根据警告状态，考虑将

type="module"

 属性添加到 

<script>

 标签。注意：如果脚本没有以 ESM 兼容的方式编码，这可能会阻止脚本工作，但解决这个问题超出了本文的范围。