Nuxt.js: 301 redirects still activated when trailingSlash is false and static application is generated and served

[v1nc3n4]

Hello,

I'm working on a statically generated app, and still the application has 301 redirects when trailing slashes are disabled and the application is _generated_ and _served_.
Below is an extract of my NuxtJS configuration in the nuxt.config.js file:

export default {
    mode: "universal",
    target: "static",
    router: {
        base: "/root-path/",
        trailingSlash: false,
        mode: "history",
        extendRoutes(routes, resolve) {
            routes.push({
                path: '*',
                component: resolve(__dirname, 'src/pages/not-found.vue')
            })
        }
    }
}

Versions

• nuxt: v2.14.1
• node: v12.18.3

What is Expected?

I expect routing to be consistent whatever the way the application is served.

What is actually happening?

• When the application is served with nuxt:
  
  
  
  • ✔️ Paths such as /root-path/sub-path lead to the relevant view.
  
  
  • ✔️ Paths such as /root-path/sub-path/ lead to the 'not-found.vue' view.
  
  
• When the application is generated with nuxt generate and served with nuxt start:
  
  
  
  • ❌ Paths such as /root-path/sub-path are redirected to /root-path/sub-path/.
  
  
  • ✔️ Paths such as /root-path/sub-path/ lead to the 'not-found.vue' view.
  
  

The problem occurs when the path such as /root-path/sub-path is directly requested, e.g. from the address bar. If I load the application with /root-path/, and then navigate with a router link to /root-path/sub-path, there's no 301 redirect.

Am i doing something wrong?
Thanks in advance for your help!
BR,
Vincent

[farnabaz]

Could you describe the structure of your pages and generated dist directory?

[v1nc3n4]

Hi @farnabaz,
The pages directory contains 5 views:

/pages
  |__ index.vue
  |__ not-found.vue
  |__ view1.vue
  |__ view2.vue
  |__ view3.vue

Here's the dist directory structure:

/dist
  |__ /_nuxt
  |__ /not-found
    |__ index.html
  |__ /view1
    |__ index.html
  |__ /view2
    |__ index.html
  |__ /view3
    |__ index.html
  |__ 200.html
  |__ index.html

[farnabaz]

It does not relate to trailingSlash. As you can see in the dist directory, in static generation Nuxt creates a directory for each page (view3.vue becomes view3/index.html). Without this directory structure in order to visit page view3.vue we must load https://domain/view3.html

But what you explain is a downside to this structure. When we want to load index.html we can load it using parent directory name and a trailing slash.
But don't worry this issue could solve in production using nginx. Also, I believe services like Netlify have handled this issue.

[v1nc3n4]

Thank you for your answer. I understand well what you explain. However, I don't think I have control on the HTTP server. These pages are hosted as regular GitHub Pages.
Finally, I understand:

• If the trailingSlash setting is false, it works fine as long as the HTTP server is configured consistently.
• I must change the trailingSlash setting, because there's no solution in my case.

I would suggest an additional note in the documentation to explain this requirement when using _static site generation_. What do you think?

[farnabaz]

It is not a requirement to use static site generation but It would be great if we describe this behavior in docs.

You are more than welcome to contribute 🙂

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[michaelhays]

I think I've found what's happening here. Here's a very simple reproduction link with trailingSlash: false: https://github.com/michaelhays/nuxt-static-trailing-slash

Clone that repo, run yarn generate and yarn start: /some-page redirects to /some-page/, which is unexpected.

However, if you remove target: 'static' from nuxt.config.js, then run yarn build and yarn start: /some-page is not redirected.

So, if we follow what's happening in nuxt start:

1. When target is set to 'static', the serve utility is called
2. serve uses serve-static from Express as the server
3. serve-static is called with extensions: ['html'] as the only option

Since nuxt generate generates the files as dist/some-page/index.html rather than dist/some-page.html, serve-static automatically redirects all routes to have a trailing slash. serve-static does however have a redirect option, which prevents this trailing slash redirect if set to false. I confirmed this works by editing the node_modules/@nuxt/cli/dist/cli-start.js file directly and setting redirect: false.

Seems like this is a bug with nuxt start; redirect should be set to false whenever router.trailingSlash is false. @pi0, would you accept a PR for this?