Vite React 应用程序：“npm run build”未构建包含部署所需的所有文件的“dist”文件夹

Question

我正在尝试将我的 vite 应用程序部署到 github 上的存储库，但出现了一些问题。我能够多次部署该项目，但在进行了一些更改并购买了用于发布该网站的域之后，它的构建过程开始失败。我想使用我的存储库作为具有购买的域的主机，以便任何人都可以使用其域名而不是 github.io URL 访问该站点。这些是我的构建过程的配置文件：

包.JSON

{ "name": "urbanstrings", "private": false, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "emailjs-com": "^3.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-just-parallax": "^3.1.16", "react-modal": "^3.16.1", "react-router-dom": "^6.22.3", "scroll-lock": "^2.1.5" }, "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "vite": "^5.2.0" } } 

VITE.CONFIG.JS `从'vite'导入{defineConfig} 从'@vitejs/plugin-react'导入反应

// https://vitejs.dev/config/ 导出默认的defineConfig({ 基址：'/SAXBookkeepers/'， 插件：[react()]， }) `

控制台错误是404错误。查找 main.js 文件时出现问题，甚至引用 dist 文件夹中的这两个特定文件时出现 404 错误：“index-BvVXP-pY.css”和“index-C8uTiFKf.js”。我认为这些文件没有上传到 github 上的存储库，因为我只在本地文件夹中看到它们，但我不明白为什么它不推送所有文件。我认为这与我面临的问题有关，这就是为什么我想知道配置文件中是否有需要修改的内容或类似的内容。

这是部署到 github 后控制台记录的内容： 控制台日志错误

访问时唯一加载网站的是头部的图标，其余部分都是空白。 如果我可以从项目中展示其他任何内容或错误以帮助找到解决方案，请告诉我。预先感谢。

Answer 1

查看GitHub Pages的部署日志

...
2024-05-26T05:38:46.4274744Z ##[group]Archive artifact
2024-05-26T05:38:46.4290409Z ./
2024-05-26T05:38:46.4291005Z ./README.md
2024-05-26T05:38:46.4291403Z ./dist/
2024-05-26T05:38:46.4291712Z ./dist/index.html
2024-05-26T05:38:46.4292576Z ./dist/assets/
...

您将

/

而不是

/dist

设置为 GitHub Pages 中的源文件夹。

但是，上传

dist

目录是一个不好的做法。推荐的方法是使用 GitHub Actions：

将

dist

添加到

.gitignore

并将以下内容写入

.github/workflows/build-and-deploy.yml

：

name: Build and deploy to GitHub Pages

on:
  push:
    branches:
      - main

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build-and-deploy:
    permissions:
      contents: read
      pages: write
      id-token: write
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - run: npm run build
      - uses: actions/configure-pages@v5
        with:
          path: dist
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - uses: actions/deploy-pages@v4