Vue.JS routing issue where URIs with more than one q param do not route on page reload

Support
,
1

Vue.JS routing issue where URIs with more than one q param do not route on page reload but load a blank page that is a 404 in the dev tools->network tab.

  1. I am not using Netlify functions or other advanced routing.

  2. I have a _redirects file that is verified to be in the root directory of the latest deploy file browser (adjacent the the index.html file) and contains:
    /assets/* /assets/:splat 200
    /* /index.html 200

  3. The vue.JS router/index.js file is using web history.

import { createRouter, createWebHistory } from ‘vue-router’;
…
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: ‘/’,
name: ‘home’,
component: HomeView,
},
…

  1. in the deploy summary, I see:
    2 redirect rules processed
    All redirect rules deployed without errors.

  2. If I reload a page that is two q params deep then in browser dev tools->console I see:
    Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.
    index-DN-zPD7V.js:1
    Which in the dev tool->network tab is located at https://elliott-cv3.netlify.app/course/assets/index-DN-zPD7V.js but in the deploy file browser is located at https://elliott-cv3.netlify.app/assets/index-DN-zPD7V.js

  3. My vite config.js file reads as follows:

    import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    assetsDir: 'assets',
    outDir: 'dist'
  },
  base: './'
})

  4. if I try and force the route then nothing loads./assets/* /assets/:splat 200
    /* /index.html 200!

Any help in understanding why this routing is going wrong would be greatly appreciated. TIA.

2

You don’t need the first redirect at all. Only the second one is needed.

3

No, I have already tried this and the issue is exactly the same.

4

Feel free to share a minimal reproduction of the issue and we can check.

5

HEllo, I have rebuilt the App to only have one URI Q param as a workaround. Not sure what you mean by provide a minimum build to reproduce the issue? Is there a specific code block or file that I can add that would help troubleshoot? I am not sure of what you are asking for exactly.

6

Hi EL,

My guess here is in your Vite config. Having your “base” set to ‘./’ is I think what causes the confusion in redirection. Maybe turning your base to just ‘/’ would have difference but I see that you have worked on a work around and I think its great!.

Best of luck!
Kiyo

2 Likes
7

huge huge thanks. yes the dot before the base url in the vite config file was the issue. Again, huge huge thanks.

2 Likes