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: .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 "./ponents/BaseSection.vue"

//ROUTER
const router = createRouter({
    history: createWebHistory(),
    routes: [{
            path: "/",
            name: "Home",
            ponent: Page,
            meta: {
                title: 'Home'
            }
        },
        {
            path: "/docs/1.0/:title",
            ponent: 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.

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/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 "./ponents/BaseSection.vue"

//ROUTER
const router = createRouter({
    history: createWebHistory(),
    routes: [{
            path: "/",
            name: "Home",
            ponent: Page,
            meta: {
                title: 'Home'
            }
        },
        {
            path: "/docs/1.0/:title",
            ponent: 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.

• javascript
• vue.js
• vue-router
• vue-cli
• vuejs3

Share Improve this question Follow edited Dec 13, 2020 at 22:44 Dan 63.2k1818 gold badges111111 silver badges119119 bronze badges asked Dec 13, 2020 at 21:53 SlaveworxSlaveworx 62133 gold badges1212 silver badges2222 bronze badges 4

• hi. when you view source of the blank page, what do you see? what happens when you click/follow the .js / .css links from there? – Dan Commented Dec 13, 2020 at 22:15
• I see just the standard VueJS index.html code. When I try to follow the .css file links it just takes me to the index.html again, however, the address in the address bar changes to the name of the route I was plus the name of the .css file (example: /docs/1.0/css/chunk-vendors.e0a049f6.css ---- where /docs/1.0/ is the actual route) – Slaveworx Commented Dec 13, 2020 at 22:28
• This ment makes it sound like the app is being served from /docs/1.0/ rather than the domain root. Is that right? – Dan Commented Dec 13, 2020 at 22:30
• Hmmm. I agree with your answer. But the thing is that all the content was uploaded to the domain root. How can it assume that path? Where can I change it? – Slaveworx Commented Dec 13, 2020 at 22:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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.

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