feat: listen on new port

packages/loading/app/app.vue

@@ -110,7 +110,7 @@ export default {
     }
 
     this.onData(window.$STATE)
-    this.sseConnect(`${this.baseURL}_loading/sse`)
+    this.sseConnect(`${this.baseURL}/sse`)
     this.setTimeout()
   },
 
@@ -135,7 +135,7 @@ export default {
       this.clearTimeout()
 
       try {
-        const data = await fetch(`${this.baseURL}_loading/json`).then(res => res.json())
+        const data = await fetch(`${this.baseURL}/json`).then(res => res.json())
         this.onData(data)
       } catch (e) {
         this.logError(e)

packages/loading/lib/loading.js

@@ -8,14 +8,14 @@ const { parseStack } = require('./utils/error')
 const SSE = require('./sse')
 
 class LoadingUI {
-  constructor ({ baseURL }) {
+  constructor () {
     // Create a connect middleware stack
     this.app = connect()
 
     // Create an SSE handler instance
     this.sse = new SSE()
 
-    this.baseURL = baseURL
+    this.baseURL = ''
     this._lastBroadCast = 0
 
     this.states = []
@@ -26,6 +26,12 @@ class LoadingUI {
   }
 
   async init () {
+    // Fix CORS
+    this.app.use((req, res, next) => {
+      res.setHeader('Access-Control-Allow-Origin', '*')
+      next()
+    })
+
     // Subscribe to SSR channel
     this.app.use('/sse', (req, res) => this.sse.subscribe(req, res))
 
@@ -40,6 +46,38 @@ class LoadingUI {
     const indexPath = resolve(distPath, 'index.html')
     this.indexTemplate = await fs.readFile(indexPath, 'utf-8')
     this.app.use('/', this.serveIndex)
+
+    // Start listening
+    await this._listen()
+  }
+
+  _listen () {
+    return new Promise((resolve, reject) => {
+      if (this._server) {
+        return resolve()
+      }
+      this._server = this.app.listen(0, (err) => {
+        if (err) {
+          return reject(err)
+        }
+        const { port } = this._server.address()
+        this.baseURL = `http://localhost:${port}`
+        resolve()
+      })
+    })
+  }
+
+  close () {
+    if (this._server) {
+      return new Promise((resolve, reject) => {
+        this._server.close((err) => {
+          if (err) {
+            return reject(err)
+          }
+          resolve()
+        })
+      })
+    }
   }
 
   get state () {

packages/loading/lib/module.js

@@ -3,14 +3,13 @@ module.exports = async function NuxtLoadingScreen () {
     return
   }
   const LoadingUI = require('./loading')
-
-  const baseURL = this.options.router.base
-  const loading = new LoadingUI({ baseURL })
+  const loading = new LoadingUI()
   await loading.init()
 
-  this.addServerMiddleware({
-    path: '/_loading', // baseURL will be prepended by nuxt for middleware
-    handler: loading.app
+  this.nuxt.options._loadingScreenBaseURL = loading.baseURL
+
+  this.nuxt.hook('close', async () => {
+    await loading.close()
   })
 
   this.nuxt.hook('bundler:progress', (states) => {

packages/loading/poi.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   entry: './app/index.js',
   output: {
-    publicUrl: '{BASE_URL}_loading/',
+    publicUrl: '{BASE_URL}',
     dir: 'app-dist',
     html: {
       template: 'app/index.html',