Vue 3 + Vite dev server returns 404 on page reload of dynamic route

Question

In my project I use Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3
I run the dev server with npm run dev.
My routes definition:

routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue'),
    },
    {
      path: '/user-details/:login',
      name: 'userDetails',
      component: () => import('@/views/User.vue'),
    },
    {
      path: '/:pathMatch(.*)*',
      component: NotFound,
    }
  ],

When I programatically navigate with router.push({name: 'userDetails', params: {login: 'john.smith'}}) the userDetails page/component is correctly displayed.
But if I browser reload dev server returns 404 and NotFound component is not displayed.

Chrome:

FF:

Working example: HERE
I've isolated the problem to Vite. Everything works fine with Vue CLI.
My vite.config.js:

import loadVersion from 'vite-plugin-package-version';

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

export default defineConfig(() => {
  return {
    server: {
      port: 8080,
    },
    plugins: [vue(), loadVersion()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    envDir: './src/configuration',
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/_variables.scss";',
        },
      },
    },
  };
});

Checked my index.html:
<script type="module" src="/src/main.js"></script>
Checked vue-router history mode docs and in caveat section it says that router should default to index.html if route is not found, and it does so with Vue CLI, but not with Vite.

createWebHashHistory works fine, but I dont want to use it. Possible solution is to use it on dev server but on production use createWebHistory with server settings explained in vue-router docs (my case nginx) ? — Dusan Cankovic
– Dusan Cankovic, Commented Aug 3, 2022 at 16:39

Dusan Cankovic · Accepted Answer · 2022-08-03 20:23:48Z

8

Yup, its know bug in Vite.
Solution is to use plugin in Vite as stated here

For me, this is a no go. I'm switching to Vue CLI.
Don't want to deal with this kind of gremlins.
I'll revisit Vite in a couple of years.

answered Aug 3, 2022 at 20:23

Dusan Cankovic

2581 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Demiro-FE-Architect Over a year ago

it's not been couple of years, but I am 100% sure you stuck with vite ;)

ftoyoshima Over a year ago

The issue was closed recently, claimed as solved on 5.0.0-beta.0

Brance Lee · Accepted Answer · 2023-09-15 03:20:42Z

Problem: I use the vite + router + history mode and meet this problem in my dev env, when I first start the vite app and the router will start '/' and load my router path into '/m/xxx', and when I reload or refresh the app at this page '/m/xxx', the vite will use '/m/xxx' as root base path rather the '/'

In production: we can use nginx to redirect the path to solve history mode as the old regular method.

But how do we solve the problem in development mode in the webpack there is a params historyApiFallback to rewrite the fallback, but I don't find in the vite to config it, so I find a way to put the <base href='/' /> in my dev index.html to set the root path so that when I reload the page and it will use the '/' as base root rather to fetch the '/m/xxx/src/index.ts'.

import { createHtmlPlugin } from 'vite-plugin-html';

defineConfig({
      plugins:[createHtmlPlugin({
        minify: true,
        entry: 'src/index.ts',
        template: 'build/vite/index.vite.html',
        inject: isProduction ? {} : {
          tags: [
            {
              injectTo: 'head-prepend',
              tag: 'base',
              attrs: {
                href: '/'
              }
            }
          ]
        }
      })
  ]
})

Another way, try to replace the vite-plugin-html with vite-plugin-parse-html could be better to solve this problem

saul narvaez menencio · Accepted Answer · 2023-05-12 21:46:09Z

0

My webapp is on Azure DevOps but its on Linux For Linux webapps you have to add next command to run your Webapp on startup command. This works for me.

pm2 serve /home/site/wwwroot --no-daemon --spa

You can see more in this article React app on Azure webapp linux

answered May 12, 2023 at 21:46

saul narvaez menencio

1

Comments

Danielola · Accepted Answer · 2022-08-03 21:26:54Z

-1

You can try a .htaccess file in the dist folder

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

[https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations][1]

As found in [https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee][2]

answered Aug 3, 2022 at 21:26

Danielola

582 bronze badges

1 Comment

gre_gor Over a year ago

OP is running Vite server, not Apache.

Collectives™ on Stack Overflow

Vue 3 + Vite dev server returns 404 on page reload of dynamic route

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related