CentOS Question posted in
The official documentation can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    I fixed this issue by changing to a different port than whatever port it runs on by default.

    For example, if the default port is localhost:8080, then try

    npm run serve -- --port 8085

    It’s the quickest fix I’ve found.

    Login or Signup to reply.
  3. 0

    This can also happen if you forget to include the () after createWebHistory

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search