无法发布vite react app到gh pages

问题描述 投票:0回答:1

我已经尝试按照有关发布到 gh 页面的文档进行操作,并且我之前已经使用静态站点完成了它。我正在尝试学习如何使用 vite + React 发布到 gh 页面。该网站是https://mattazz.github.io/npc-gen/

我能够成功构建和发布,但是当我打开一个页面时,它只是一个白色的空白页面,控制台中有一些错误:

GET https://mattazz.github.io/assets/index-24f5ab68.js net::ERR_ABORTED 404
GET https://mattazz.github.io/assets/index-1a0b6476.css net::ERR_ABORTED 404
mattazz.github.io/:1 Unchecked runtime.lastError: The message port closed before a response was received.

这就是我的构建文件夹的样子:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik+Iso" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NPC Generator</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

package.json

{
  "homepage": "http://mattazz.github.io/npc-gen",
  "name": "vite-project",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "dotenv": "^16.0.3",
    "jspdf": "^2.5.1",
    "openai": "^3.2.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "gh-pages": "^5.0.0",
    "vite": "^4.1.0"
  }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: { chunkSizeWarningLimit: 1600, },
})


reactjs github-pages vite
1个回答
0
投票

尝试关闭 AdBlock、Adobe Acrobat、Google Docs Offline、Hover Zoom+、Norton Identity Safe、Norton Safe Web 等扩展程序并检查。

查看此以供参考:https://github.com/gatsbyjs/gatsby/issues/9899

© www.soinside.com 2019 - 2024. All rights reserved.