【问题标题】:React/Vite, published on github pages successfully but it's blank pageReact/Vite,在github pages上发布成功,但是页面空白
【发布时间】:2023-02-12 20:09:42
【问题描述】:

您好,我尝试在 Github 页面上发布我的项目 React.js/Vite,但发布后是空白页面。 vite配置文件 尝试了其他帖子中提到的所有内容,但我仍然得到空白页:( 任何帮助,将不胜感激! 谢谢

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/redberry-bootcamp'
})

包.json

{
  "name": "redberry-bootcamp",
  "homepage": "http://n1kushach.github.io/redberry-bootcamp",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "@hookform/resolvers": "^2.9.10",
    "axios": "^1.3.2",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.0",
    "react-router-dom": "^6.8.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

应用程序.jsx

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./pages/Home";
import { Info } from "./pages/Info";
import { Education } from "./pages/Education";
import { Experience } from "./pages/Experience";
import { useState, useEffect } from "react";

function App() {
  const [mainData, setMainData] = useState();
  const [img, setImg] = useState();
  const apiData = new FormData()
  
    useEffect(() => {
      sessionStorage.setItem("mainData", JSON.stringify(mainData));
    }, [mainData])

  return (
    <div className="App">
      <Router basename="/redberry-bootcamp/">
        <Routes>
          <Route path="/" element={<Home mainData={mainData} setMainData={setMainData} />} />
          <Route path="/info" element={<Info img={img} setImg={setImg} apiData={apiData} mainData={mainData} setMainData={setMainData} />} />
          <Route path="/experience" element={<Experience img={img} setImg={setImg}  apiData={apiData}  mainData={mainData} setMainData={setMainData}/>}/>
          <Route path="/education" element={<Education img={img} setImg={setImg}  apiData={apiData}  mainData={mainData} setMainData={setMainData}/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

如果需要更多代码截图,请不要犹豫,我可以给你看

【问题讨论】:

    标签: reactjs github-pages vite


    【解决方案1】:

    不知何故,它奏效了,可能只是需要时间来改变事情!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-02-18
      • 2021-01-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-06-27
      • 2023-03-17
      • 2021-10-13
      相关资源
      最近更新 更多