Nuxtjs Page does not refresh nor can be accessed if URL does not end with a trailing slash

I am having an issue in my nuxtjs application refreshing the page (F5).

Let’s say im in this page https://example.com/foo/bar (which equals to https://example.com/foo/bar/index.html) and I press the refresh button the page doesn’t reload after some time I get a this site can't be reached error.

But when I put a slash / at the end it reloads perfectly.

Also, I cannot access the page directly without a slash at the end or /index.html and when I do it changes to https://example.com/foo/bar.

Any idea on how to fix this?

I do not want to use router: { trailingSlash: false }, because I read that is going to affect my SEO.

I also added this: vue.js - NuxtJS Static generated HTML page does not load Javascript when calling /index.html - Stack Overflow but it did not solved this issue tho it solved another one I had.

my nuxt-config.js:

router: {
  //https://stackoverflow.com/questions/63719727/nuxtjs-static-generated-html-page-does-not-load-javascript-when-calling-index-h
  extendRoutes(routes) {
    routes.forEach((route) => {
      // When options.generate.subFolders is true (default)
      const alias = route.path.length > 1 ? `${route.path}/index.html` : '/index.html'

      // When options.generate.subFolders is false
      // const normalizedRoute = route.path.replace(/\/$/, '') // Remove trailing slashes if they exist
      // const alias =
      //   route.path.length > 1 ? `${normalizedRoute}.html` : '/index.html'

      route.alias = alias
    })
  },
},