fix: improve router.base handling (#5470)

packages/config/src/options.js

@@ -22,6 +22,7 @@ export function getNuxtConfig(_options) {
   if (options.loading === true) {
     delete options.loading
   }
+
   if (
     options.router &&
     options.router.middleware &&
@@ -29,15 +30,19 @@ export function getNuxtConfig(_options) {
   ) {
     options.router.middleware = [options.router.middleware]
   }
+
   if (options.router && typeof options.router.base === 'string') {
     options._routerBaseSpecified = true
   }
+
   if (typeof options.transition === 'string') {
     options.transition = { name: options.transition }
   }
+
   if (typeof options.layoutTransition === 'string') {
     options.layoutTransition = { name: options.layoutTransition }
   }
+
   if (typeof options.extensions === 'string') {
     options.extensions = [options.extensions]
   }
@@ -69,6 +74,11 @@ export function getNuxtConfig(_options) {
 
   defaultsDeep(options, nuxtConfig)
 
+  // Sanitize router.base
+  if (!/\/$/.test(options.router.base)) {
+    options.router.base += '/'
+  }
+
   // Check srcDir and generate.dir existence
   const hasSrcDir = isNonEmptyString(options.srcDir)
   const hasGenerateDir = isNonEmptyString(options.generate.dir)
@@ -221,7 +231,7 @@ export function getNuxtConfig(_options) {
     })
   }
 
-  // vue config
+  // Vue config
   const vueConfig = options.vue.config
 
   if (vueConfig.silent === undefined) {

packages/config/test/options.test.js

@@ -227,3 +227,10 @@ describe('config: options', () => {
     })
   })
 })
+
+describe('config: router', () => {
+  test('should sanitize router.base', () => {
+    const config = getNuxtConfig({ router: { base: '/foo' } })
+    expect(config.router.base).toBe('/foo/')
+  })
+})

packages/server/src/listener.js

@@ -6,7 +6,7 @@ import consola from 'consola'
 import pify from 'pify'
 
 export default class Listener {
-  constructor({ port, host, socket, https, app, dev }) {
+  constructor({ port, host, socket, https, app, dev, baseURL }) {
     // Options
     this.port = port
     this.host = host
@@ -14,6 +14,7 @@ export default class Listener {
     this.https = https
     this.app = app
     this.dev = dev
+    this.baseURL = baseURL
 
     // After listen
     this.listening = false
@@ -46,7 +47,7 @@ export default class Listener {
         case '0.0.0.0': this.host = ip.address(); break
       }
       this.port = address.port
-      this.url = `http${this.https ? 's' : ''}://${this.host}:${this.port}`
+      this.url = `http${this.https ? 's' : ''}://${this.host}:${this.port}${this.baseURL}`
       return
     }
     this.url = `unix+http://${address}`

packages/server/src/server.js

@@ -239,7 +239,8 @@ export default class Server {
       socket: socket || this.options.server.socket,
       https: this.options.server.https,
       app: this.app,
-      dev: this.options.dev
+      dev: this.options.dev,
+      baseURL: this.options.router.base
     })
 
     // Listen

packages/server/test/listener.test.js

@@ -228,7 +228,8 @@ describe('server: listener', () => {
   test('should compute http url', () => {
     const options = {
       port: 3000,
-      host: 'localhost'
+      host: 'localhost',
+      baseURL: '/'
     }
     const listener = new Listener(options)
     listener.server = mockServer()
@@ -240,7 +241,7 @@ describe('server: listener', () => {
     listener.computeURL()
     expect(listener.host).toEqual('localhost')
     expect(listener.port).toEqual(3000)
-    expect(listener.url).toEqual('http://localhost:3000')
+    expect(listener.url).toEqual('http://localhost:3000/')
 
     listener.server.address.mockReturnValueOnce({
       address: '127.0.0.1',
@@ -249,7 +250,7 @@ describe('server: listener', () => {
     listener.computeURL()
     expect(listener.host).toEqual('localhost')
     expect(listener.port).toEqual(3001)
-    expect(listener.url).toEqual('http://localhost:3001')
+    expect(listener.url).toEqual('http://localhost:3001/')
 
     ip.address.mockReturnValueOnce('192.168.0.1')
     listener.server.address.mockReturnValueOnce({
@@ -259,14 +260,15 @@ describe('server: listener', () => {
     listener.computeURL()
     expect(listener.host).toEqual('192.168.0.1')
     expect(listener.port).toEqual(3002)
-    expect(listener.url).toEqual('http://192.168.0.1:3002')
+    expect(listener.url).toEqual('http://192.168.0.1:3002/')
   })
 
   test('should compute https url', () => {
     const options = {
       port: 3000,
       host: 'localhost',
-      https: true
+      https: true,
+      baseURL: '/'
     }
     const listener = new Listener(options)
     listener.server = mockServer()
@@ -278,7 +280,7 @@ describe('server: listener', () => {
     listener.computeURL()
     expect(listener.host).toEqual('localhost')
     expect(listener.port).toEqual(3000)
-    expect(listener.url).toEqual('https://localhost:3000')
+    expect(listener.url).toEqual('https://localhost:3000/')
 
     listener.server.address.mockReturnValueOnce({
       address: '127.0.0.1',
@@ -287,7 +289,7 @@ describe('server: listener', () => {
     listener.computeURL()
     expect(listener.host).toEqual('localhost')
     expect(listener.port).toEqual(3001)
-    expect(listener.url).toEqual('https://localhost:3001')
+    expect(listener.url).toEqual('https://localhost:3001/')
 
     ip.address.mockReturnValueOnce('192.168.0.1')
     listener.server.address.mockReturnValueOnce({
@@ -297,7 +299,7 @@ describe('server: listener', () => {
     listener.computeURL()
     expect(listener.host).toEqual('192.168.0.1')
     expect(listener.port).toEqual(3002)
-    expect(listener.url).toEqual('https://192.168.0.1:3002')
+    expect(listener.url).toEqual('https://192.168.0.1:3002/')
   })
 
   test('should compute unix socket url', () => {

packages/server/test/server.test.js

@@ -43,6 +43,9 @@ describe('server: server', () => {
       build: {
         publicPath: '__nuxt_test'
       },
+      router: {
+        base: '/foo/'
+      },
       render: {
         id: 'test-render',
         dist: {
@@ -485,7 +488,8 @@ describe('server: server', () => {
       socket: '/var/nuxt/unix.socket',
       https: undefined,
       app: server.app,
-      dev: server.options.dev
+      dev: server.options.dev,
+      baseURL: '/foo/'
     })
     expect(listener.listen).toBeCalledTimes(1)
     expect(server.listeners).toEqual([ listener ])
@@ -508,7 +512,8 @@ describe('server: server', () => {
     expect(Listener).toBeCalledWith({
       ...nuxt.options.server,
       app: server.app,
-      dev: server.options.dev
+      dev: server.options.dev,
+      baseURL: '/foo/'
     })
   })