Blank page when serving my app (Vue Router 4 - Vue 3)

user_4418242 0
Viewed 3803

I have made the first npm run build to take my first big Vue3 application to a real-world server test drive.

So I got the files, uploaded them into my VPS, and surprise: The server only recognizes the route paths if I navigate through clicks.

If I happen to reload the page or navigate directly to an URL, the browser throws an error. I have added the code referred here: https://next.router.vuejs.org/guide/essentials/history-mode.html to my .htaccess file (I'm using apache on Centos 7 and I'm using CWP), but the problem persists, the only difference is that instead of throwing an error, it just gets stuck in the index.html page, but without rendering any content whatsoever.

I can't figure out what I am doing wrong.

Please check my code below regarding the implementation of Vue Router 4.

I am defining everything in main.js file, like so:

import { createRouter, createWebHistory } from "vue-router"
import Page from "./views/Page.vue"
import Content from "./views/Content.vue"
import BaseSection from "./components/BaseSection.vue"

//ROUTER
const router = createRouter({
    history: createWebHistory(),
    routes: [{
            path: "/",
            name: "Home",
            component: Page,
            meta: {
                title: 'Home'
            }
        },
        {
            path: "/docs/1.0/:title",
            component: Content,
            name: "docs"
        }
    ],
    scrollBehavior(to) {
        if (to.hash) {
            return {
                el: to.hash,
                behavior: 'smooth',
            }
        }
    }
});

app.use(router);

Any idea or suggestion? I'm going crazy.

thank you.

Regards, T.

vue-cli vue-router vuejs3 vue.js javascript
1 Answers

The blank page error usually happens when serving the app from somewhere other than the domain root. In that case, the Vue CLI has to be configured accordingly. Modfiy vue.config.js in the project root (create it if it doesn't exist):

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/docs/1.0/'  // This is whatever your path from the root is
    : '/'
}

You can read more about publicPath here

Make sure your .htaccess is in /docs/1.0/ as well

user_21850930
Related