Vue/Vite Page getting 404 #122066

ktonner · 2024-05-02T22:05:49Z

ktonner
May 2, 2024

Select Topic Area

Bug

Body

I literally just created a page to start working with and it works fine on local, but on github pages I'm getting a 404 error.

I've tried tweaking a few things (change from main.ts to main.js, change the base in vite.config, change the links) but nothing seems to make a difference and the problem seems to lie in main.js loading. This has happened to me on other attempts before, so I believe the problem is with connecting something with github or the layout not matching with how github pages likes.

my index.html file looks like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

and main.js like this

import './assets/main.css'

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

and vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VueDevTools(),
  ],
  base: "https://ktonner.github.io/mahinabees/",
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Answered by ktonner

May 2, 2024

found the answer! as said at the end of this video, need to create a separate branch for the dist folders after running npm run build
https://www.youtube.com/watch?v=yo2bMGnIKE8

View full answer

ktonner · 2024-05-02T22:31:37Z

ktonner
May 2, 2024
Author

found the answer! as said at the end of this video, need to create a separate branch for the dist folders after running npm run build
https://www.youtube.com/watch?v=yo2bMGnIKE8

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Vue/Vite Page getting 404 #122066

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

GitHub Community

Vue/Vite Page getting 404 #122066

ktonner May 2, 2024

Select Topic Area

Body

Replies: 1 comment

ktonner May 2, 2024 Author

ktonner
May 2, 2024

ktonner
May 2, 2024
Author