javascript - Vuejs/Nuxt 404 error when loading the /index.html directly

Question

I'm trying to build a single page app, but from the looks of it, I'm unable to get the functionality working in this specific way.

If you got directly to the /index.html file, you're hitting a 404 page.

If you go to the same route without index such as "/" it works. However because of the environment I am using, I need to load the index.html files directly in the url path, example, /mydirectory/index.html and /index.html etc.

Is there a way to accomplish this?

For nuxt, I can have all links directly setup with href= to the correct index.html files, but vuejs will just throw an error as if it doesnt understand the route.

As an example, I tried to configure the routes on nuxt to look at the direct pathways, and this also failed, made no change. (I am using a fresh nuxt install for testing)

router: {

        routes: [
            {
                name: 'index',
                path: '/index.html',
                component: 'pages/index.vue'
            },
            {
                name: 'inspire',
                path: '/inspire/index.html',
                component: 'pages/inspire.vue'
            }
        ]
    },

Loading in the address bar /index.html (404 -error) compared to "/" which works.

If anyone asks, why do I want this? This is not for a website, otherwise I wouldnt need to do this, but based on the functionality of Vue/Nuxt, this should be possible because nuxt has already generated the static html files for these locations, and it loads up, but because of routing, it doesnt understand it.

I am using ssr: false and target: 'static'

Edit:

Looking into global nuxt objects and found this is the route details

_route:
  fullPath: "/index.html"
  hash: ""
  matched: []
  meta: {}
  name: null
  params: {}
  path: "/index.html"
  query: {}

Clearly the path says /index.html, so it can read the path just fine and I even manually set that up on the router config just to be sure, yet it doesnt even care to associate it, shows the 404 error.

UPDATE:

After researching and digging through the internet, came up with some options to get closer to the result I am looking for.

First, Nuxt has removed the routes config I tried above, and in favor of using extendRoutes(routes) now, so thats why originally it wasnt working. However, when I tried to update the routes themselves, the generate would throw an error because it attempted to build directories for /index.html/index.html not good. So that wont work.

https://github.com/nuxt/nuxt.js/issues/112

Second, I then came across this post, where you can use route alias, and this has acheived the result of loading /index.html and appears to load up without a 404 error.

https://www.reddit.com/r/Nuxt/comments/gzwrqu/visiting_generated_site_routes_with_trailing/ftnylrt?utm_source=share&utm_medium=web2x&context=3

extendRoutes(routes) {
    routes.forEach((route) => {
        const alias = route.path.length > 1 ? `${route.path}/index.html` : '/index.html'        
        route.alias = alias
    })
},

question from:https://stackoverflow.com/questions/65645740/vuejs-nuxt-404-error-when-loading-the-index-html-directly

Answer 1

Waitting for answers