vue.js - NuxtJS statiskt genererad HTML-sida laddar inte Javascript när /index.html anropas

Jag arbetar på ett nuxtjs-projekt som kommer att genereras för statisk användning. Naturligtvis använder det Javascript för till exempel navigering, några formulär och mer.

När jag använder sidan med npm run dev fungerar allt bra.

Efter att ha exporterat med npm run build && npm run generate distribuerar jag det genererade innehållet från /dist till min server (cdn begärd av användaren, i det fallet Google Cloud Storage). Jag kan använda sidan utan några problem om jag inte lägger till index.html-suffixet.

Exempel :

Att besöka https://page.com/subpage/ fungerar bra

men

Att besöka https://page.com/subpage/index.html inte riktigt.

Ja, det renderar innehållet med CSS och DOM, men Javascript fungerar inte alls. I Google Chromes Dev-Tools kan jag se att i båda fallen verkar javascript vara laddat, men inte anropat i det andra scenariot. Se bifogade skärmdumpar. Båda var liknande.

Min nuxt-konfiguration är nästan tom när det gäller render- och byggkonfigurationer. Jag har bara inaktiverat ressourceHints och det är allt. Jag är inte säker på om detta är ett problem med routern som bara accepterar mappen som innehåller index.html. Routervägarna genereras dynamiskt av nuxtLinks.

Några idéer?

Svar #1

Uppdatering

Efter att ha letat efter svar i ungefär ytterligare 1-2 timmar, hittade jag äntligen en lösning.

Det finns ett sätt att lägga till index.html-suffixet till routern som ett alias för varje väg.

Genom att utöka routern i nuxt-konfigurationen kan du teoretiskt lägga till ett alias baserat på router-vägen. Det är inte alltid det bästa sättet, men det fungerar ganska bra i den situationen.

router: {
  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
    })
  }
}

Jag fick detta utdrag från reddit-inlägget av animagnam (https://www.reddit.com/r/Nuxt/comments/gzwrqu/visiting_generated_site_routes_with_trailing/ftnylrt?utm_source=share&utm_medium=web2x&context=3) och det fungerar perfekt i produktion och tester.