fix: handle router.base for crawler and serve (#7486)

Co-authored-by: pooya parsa <pyapar@gmail.com>

packages/cli/src/commands/serve.js

@@ -39,6 +39,7 @@ export default {
     const app = connect()
     app.use(compression({ threshold: 0 }))
     app.use(
+      options.router.base,
       serveStatic(options.generate.dir, {
         extensions: ['html']
       })

packages/generator/src/generator.js

@@ -302,6 +302,7 @@ export default class Generator {
         const possibleTrailingSlash = this.options.router.trailingSlash ? '/' : ''
         parse(html).querySelectorAll('a').map((el) => {
           const sanitizedHref = (el.getAttribute('href') || '')
+            .replace(this.options.router.base, '/')
             .replace(/\/+$/, '')
             .split('?')[0]
             .split('#')[0]

packages/vue-app/template/App.js

@@ -303,9 +303,14 @@ export default {
       this._payloadFetchIndex = 0
     },
     async fetchPayload(route) {
+      const { staticAssetsBase } = window.<%= globals.context %>
+      const base = (this.$router.options.base || '').replace(/\/+$/, '')
+      if (base && route.startsWith(base)) {
+        route = route.substr(base.length)
+      }
       route = (route.replace(/\/+$/, '') || '/').split('?')[0]
+      const src = urlJoin(base, staticAssetsBase, route, 'payload.js')
       try {
-        const src = urlJoin(window.<%= globals.context %>.staticAssetsBase, route, 'payload.js')
         const payload = await window.__NUXT_IMPORT__(route, src)
         this.setPagePayload(payload)
         return payload

packages/vue-renderer/src/renderers/ssr.js

@@ -164,6 +164,7 @@ export default class SSRRenderer extends BaseRenderer {
     if (renderContext.staticAssetsBase) {
       const preloadScripts = []
       renderContext.staticAssets = []
+      const routerBase = this.options.router.base
       const { staticAssetsBase, url, nuxt, staticAssets } = renderContext
       const { data, fetch, mutations, ...state } = nuxt
 
@@ -177,9 +178,9 @@ export default class SSRRenderer extends BaseRenderer {
       const stateScriptKb = (stateScript.length * 4 /* utf8 */) / 100
       if (stateScriptKb > 10) {
         const statePath = urlJoin(url, 'state.js')
-        const stateUrl = urlJoin(staticAssetsBase, statePath)
+        const stateUrl = urlJoin(routerBase, staticAssetsBase, statePath)
         staticAssets.push({ path: statePath, src: stateScript })
-        APP += `<script defer src="${staticAssetsBase}${statePath}"></script>`
+        APP += `<script defer src="${stateUrl}"></script>`
         preloadScripts.push(stateUrl)
       } else {
         APP += `<script>${stateScript}</script>`
@@ -187,7 +188,7 @@ export default class SSRRenderer extends BaseRenderer {
 
       // Page level payload.js (async loaded for CSR)
       const payloadPath = urlJoin(url, 'payload.js')
-      const payloadUrl = urlJoin(staticAssetsBase, payloadPath)
+      const payloadUrl = urlJoin(routerBase, staticAssetsBase, payloadPath)
       const routePath = (url.replace(/\/+$/, '') || '/').split('?')[0] // remove trailing slah and query params
       const payloadScript = `__NUXT_JSONP__("${routePath}", ${devalue({ data, fetch, mutations })});`
       staticAssets.push({ path: payloadPath, src: payloadScript })

test/fixtures/full-static/nuxt.config.js

@@ -5,6 +5,9 @@ export default {
       config: true
     }
   },
+  router: {
+    // base: '/test'
+  },
   hooks: {
     export: {
       before ({ setPayload }) {