If route params contains dot(.) vue redirect the route to 404. In vue 2 we can allow/handle dot in router params using following rule in webpack:

devServer: {
      historyApiFallback: {
          disableDotRule: true
      }
 }

But vue 3 use vite instead of webpack. How to handle dot in parameters now?

route example are following:

{
  path: your-route/:params",
  ponent: someponent,
}

If route params contains dot(.) vue redirect the route to 404. In vue 2 we can allow/handle dot in router params using following rule in webpack:

devServer: {
      historyApiFallback: {
          disableDotRule: true
      }
 }

But vue 3 use vite instead of webpack. How to handle dot in parameters now?

route example are following:

{
  path: your-route/:params",
  ponent: someponent,
}

• javascript
• vue.js
• vuejs2

• It's usually best to go to the official source first instead of asking here. See github./vitejs/vite/issues/4344 – Phil Commented Feb 8, 2022 at 6:37

2 Answers 2

I had the same problem and based on one of the question ments I went to the github issue about this problem and they remend a plugin for vite that solves it.

Install it with

npm install --save-dev vite-plugin-rewrite-all

And add it to vite.config.js

import pluginRewriteAll from 'vite-plugin-rewrite-all';

export default {
  plugins: [pluginRewriteAll()]
}

Check out the github issue https://github./vitejs/vite/issues/4344

And the plugin's github https://github./ivesia/vite-plugin-rewrite-all.

Vite 5 allows dots in URL params without the need for any plugins. It's mentioned here in this thread.

You can update to Vite 5 with

npm install -D vite@latest