Url not found when loading pages straight from the url in vue.js

Question

Im using vue-router in vue.js. It works fine when Im running it as a local server but as soon as I uploading it to my webserver and enter a page directly it results in "Not found" error,

This works fine running as local server: http://192.168.2.118:8080/page2

But this: https://www.mypage.com/page2

results in

Not Found The requested URL was not found on this server.

I have got mode set to "history" to get rid of the # in the url but doesnt seems to have anything to do with the.

Has it anything to do with my webserver?

this is the code in my router.js

export default new Router({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            name: "page1",
            component: Page1
        },
        {
            path: "/page2",
            name: "page2",
            component: () =>
                import(/* webpackChunkName: "home" */ "./views/Page2.vue")
        }
    ]
});

This is the full repo for the project: https://github.com/reppoper/forumpost

SOLUTION:

I found a solution by putting this .htaccess file in the root folder. No everything works as expected:

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

What host are you using? Netlify? – Daniel_Knights Oct 27 '20 at 15:41 — Daniel_Knights, Oct 27 '20 at 15:41

score 0 · Answer 1 · answered Oct 27 '20 at 15:20

0

Since your app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://yoursite.com/page2 directly in their browser.

To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.

Check the docs to fix this issues on different kind of servers. Docs

answered Oct 27 '20 at 15:20

Andres Abadia

817
7
14

hm. I have got two webhotels and this works ´http://yoursite.com/page2´ on one but not on the other. Are there any configuration for me to do on the server to get this working? – acroscene Oct 27 '20 at 20:32
found solution. updated my post above – acroscene Oct 27 '20 at 21:07
Nice! That solution works on Apache servers. https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations – Andres Abadia Oct 27 '20 at 21:17

Url not found when loading pages straight from the url in vue.js

1 Answers1