CODEWITHSUNDEEP
githubvue-routervuejs3vite
Tai Pham
Tai Pham

Reputation: 39

[Vite - Vue 3]Page not found when reload page on Github

When I click router-link to redirect to another page, it loads successfully.

But after reloading, the page is not found.

I use Vite 2.6, Vue 3.2 and Vue Router 4.0.

In local, it still works fine, it only fail on my github.io.

vite.config.js

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

export default defineConfig({
    base: 'study',
    plugins: [vue()],
    build: {
        sourcemap: false,
    },
});

routes.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    }
];
export default function () {
    return createRouter({
        history: createWebHistory('/study'),
        routes,
    });
}

main.js

import { createApp } from 'vue';
import App from './App.vue';
import createRouter from './router/routes';

const router = createRouter();
const app = createApp(App);
app.use(router);
app.mount('#app');

Thank you

Upvotes: 1

Views: 700

Answers (1)

Mouhsine Elachbi
Mouhsine Elachbi

Reputation: 41

You better use apache or nginx for hosting your files In /dist folder create a file and called It .htaccess then put those lines in It. as mention here

For Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Then copy all files from dist to hdocs in apache main folder

Upvotes: 1

Related Questions