GitHub Pages with Vite and React: Absolute Path Issue for JavaScript Rendering - Stack Overflow

admin管理员组

文章数量:1332329

I am deploying a React project using Vite to GitHub Pages. My GitHub Pages URL is: /

I have a project called cv_wizardy, so the project should be accessible at: /

However, when I deploy and upload the project files, the root JavaScript only renders when the path is set to the absolute path /. It does not work correctly when accessed via the relative path /.

Setup:

I'm using Vite with React. The issue occurs with the JavaScript files that seem to be looking for the root directory (/) instead of the /cv_wizardy/ subpath.

I've also checked that the repository is correctly configured to use GitHub Pages. What am I missing or doing wrong here? How can I make the project work with the correct relative paths?

I've ensured the base property in vite.config.ts is set to /cv_wizardy/:

export default defineConfig(({ mode }) => ({
  base: '/cv_wizardy/',
  plugins: [
    react(),
    mode === "development" && componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

I am deploying a React project using Vite to GitHub Pages. My GitHub Pages URL is: https://adelelawady.github.io/

I have a project called cv_wizardy, so the project should be accessible at: https://adelelawady.github.io/cv_wizardy/

However, when I deploy and upload the project files, the root JavaScript only renders when the path is set to the absolute path /. It does not work correctly when accessed via the relative path https://adelelawady.github.io/cv_wizardy/.

Setup:

I'm using Vite with React. The issue occurs with the JavaScript files that seem to be looking for the root directory (/) instead of the /cv_wizardy/ subpath.

I've also checked that the repository is correctly configured to use GitHub Pages. What am I missing or doing wrong here? How can I make the project work with the correct relative paths?

I've ensured the base property in vite.config.ts is set to /cv_wizardy/:

export default defineConfig(({ mode }) => ({
  base: '/cv_wizardy/',
  plugins: [
    react(),
    mode === "development" && componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

• github
• vite
• github-pages

Share Improve this question Follow edited Feb 3 at 16:43 rozsazoltan 9,82566 gold badges1919 silver badges4545 bronze badges asked Nov 20, 2024 at 18:37 Adel Ali MohamedAdel Ali Mohamed 133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

you can try to use relative path, vite build use absolute path by default, but Github Page can't solve absolute path now.

- <link rel="stylesheet" crossorigin href="/cv_wizardy/assets/index-DSvXlYyr.css">
+ <link rel="stylesheet" crossorigin href="assets/index-DSvXlYyr.css">

ref: GitHub pages and absolute paths

本文标签： GitHub Pages with Vite and React Absolute Path Issue for JavaScript RenderingStack Overflow