fix: ssr-manifest no base (#8371)

packages/vite/src/node/ssr/ssrManifestPlugin.ts

@@ -59,7 +59,7 @@ export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
                     chunk.viteMetadata.importedCss.forEach((file) => {
-                      deps.push(`/${file}`)
+                      deps.push(join(config.base, file))
                     })
                     chunk.imports.forEach(addDeps)
                   }

playground/ssr-vue/__tests__/serve.ts

@@ -13,6 +13,7 @@ export async function serve() {
     const { build } = await import('vite')
     // client build
     await build({
+      base: '/test/',
       root: rootDir,
       logLevel: 'silent', // exceptions are logged by Vitest
       build: {
@@ -24,6 +25,7 @@ export async function serve() {
     })
     // server build
     await build({
+      base: '/test/',
       root: rootDir,
       logLevel: 'silent',
       build: {

playground/ssr-vue/__tests__/ssr-vue.spec.ts

@@ -10,48 +10,48 @@ import {
   untilUpdated
 } from '~utils'
 
-const url = `http://localhost:${port}`
+const url = `http://localhost:${port}/test/`
 
 test('vuex can be import succeed by named import', async () => {
   // wait networkidle for dynamic optimize vuex
-  await page.goto(url + '/store', { waitUntil: 'networkidle' })
+  await page.goto(url + 'store', { waitUntil: 'networkidle' })
   expect(await page.textContent('h1')).toMatch('bar')
 
   // raw http request
-  const storeHtml = await (await fetch(url + '/store')).text()
+  const storeHtml = await (await fetch(url + 'store')).text()
   expect(storeHtml).toMatch('bar')
 })
 
 test('/about', async () => {
-  await page.goto(url + '/about')
+  await page.goto(url + 'about')
   expect(await page.textContent('h1')).toMatch('About')
   // should not have hydration mismatch
   browserLogs.forEach((msg) => {
     expect(msg).not.toMatch('mismatch')
   })
 
   // fetch sub route
-  const aboutHtml = await (await fetch(url + '/about')).text()
+  const aboutHtml = await (await fetch(url + 'about')).text()
   expect(aboutHtml).toMatch('About')
   if (isBuild) {
     // assert correct preload directive generation for async chunks and CSS
     expect(aboutHtml).not.toMatch(
-      /link rel="modulepreload".*?href="\/assets\/Home\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/Home\.\w{8}\.js"/
     )
     expect(aboutHtml).not.toMatch(
-      /link rel="stylesheet".*?href="\/assets\/Home\.\w{8}\.css"/
+      /link rel="stylesheet".*?href="\/test\/assets\/Home\.\w{8}\.css"/
     )
     expect(aboutHtml).toMatch(
-      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/About\.\w{8}\.js"/
     )
     expect(aboutHtml).toMatch(
-      /link rel="stylesheet".*?href="\/assets\/About\.\w{8}\.css"/
+      /link rel="stylesheet".*?href="\/test\/assets\/About\.\w{8}\.css"/
     )
   }
 })
 
 test('/external', async () => {
-  await page.goto(url + '/external')
+  await page.goto(url + 'external')
   expect(await page.textContent('div')).toMatch(
     'Example external component content'
   )
@@ -61,18 +61,18 @@ test('/external', async () => {
   })
 
   // fetch sub route
-  const externalHtml = await (await fetch(url + '/external')).text()
+  const externalHtml = await (await fetch(url + 'external')).text()
   expect(externalHtml).toMatch('Example external component content')
   if (isBuild) {
     // assert correct preload directive generation for async chunks and CSS
     expect(externalHtml).not.toMatch(
-      /link rel="modulepreload".*?href="\/assets\/Home\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/Home\.\w{8}\.js"/
     )
     expect(externalHtml).not.toMatch(
-      /link rel="stylesheet".*?href="\/assets\/Home\.\w{8}\.css"/
+      /link rel="stylesheet".*?href="\/test\/assets\/Home\.\w{8}\.css"/
     )
     expect(externalHtml).toMatch(
-      /link rel="modulepreload".*?href="\/assets\/External\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/External\.\w{8}\.js"/
     )
   }
 })
@@ -90,23 +90,23 @@ test('/', async () => {
   if (isBuild) {
     // assert correct preload directive generation for async chunks and CSS
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="\/assets\/Home\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/Home\.\w{8}\.js"/
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="\/assets\/Home\.\w{8}\.css"/
+      /link rel="stylesheet".*?href="\/test\/assets\/Home\.\w{8}\.css"/
     )
     // JSX component preload registration
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="\/assets\/Foo\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/Foo\.\w{8}\.js"/
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="\/assets\/Foo\.\w{8}\.css"/
+      /link rel="stylesheet".*?href="\/test\/assets\/Foo\.\w{8}\.css"/
     )
     expect(html).not.toMatch(
-      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+      /link rel="modulepreload".*?href="\/test\/assets\/About\.\w{8}\.js"/
     )
     expect(html).not.toMatch(
-      /link rel="stylesheet".*?href="\/assets\/About\.\w{8}\.css"/
+      /link rel="stylesheet".*?href="\/test\/assets\/About\.\w{8}\.css"/
     )
   }
 })
@@ -132,7 +132,7 @@ test('asset', async () => {
   })
   const img = await page.$('img')
   expect(await img.getAttribute('src')).toMatch(
-    isBuild ? /\/assets\/logo\.\w{8}\.png/ : '/src/assets/logo.png'
+    isBuild ? /\/test\/assets\/logo\.\w{8}\.png/ : '/src/assets/logo.png'
   )
 })
 
@@ -166,13 +166,13 @@ test('hmr', async () => {
 
 test('client navigation', async () => {
   await page.goto(url)
-  await untilUpdated(() => page.textContent('a[href="/about"]'), 'About')
-  await page.click('a[href="/about"]')
+  await untilUpdated(() => page.textContent('a[href="/test/about"]'), 'About')
+  await page.click('a[href="/test/about"]')
   await untilUpdated(() => page.textContent('h1'), 'About')
   editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
   await untilUpdated(() => page.textContent('h1'), 'changed')
-  await page.click('a[href="/"]')
-  await untilUpdated(() => page.textContent('a[href="/"]'), 'Home')
+  await page.click('a[href="/test/"]')
+  await untilUpdated(() => page.textContent('a[href="/test/"]'), 'Home')
 })
 
 test('import.meta.url', async () => {
@@ -183,7 +183,8 @@ test('import.meta.url', async () => {
 test.runIf(isBuild)('dynamic css file should be preloaded', async () => {
   await page.goto(url)
   const homeHtml = await (await fetch(url)).text()
-  const re = /link rel="modulepreload".*?href="\/assets\/(Home\.\w{8}\.js)"/
+  const re =
+    /link rel="modulepreload".*?href="\/test\/assets\/(Home\.\w{8}\.js)"/
   const filename = re.exec(homeHtml)[1]
   const manifest = require(resolve(
     process.cwd(),

playground/ssr-vue/server.js

@@ -29,6 +29,7 @@ async function createServer(
   let vite
   if (!isProd) {
     vite = await require('vite').createServer({
+      base: '/test/',
       root,
       logLevel: isTest ? 'error' : 'info',
       server: {
@@ -49,6 +50,7 @@ async function createServer(
   } else {
     app.use(require('compression')())
     app.use(
+      '/test/',
       require('serve-static')(resolve('dist/client'), {
         index: false
       })
@@ -57,7 +59,7 @@ async function createServer(
 
   app.use('*', async (req, res) => {
     try {
-      const url = req.originalUrl
+      const url = req.originalUrl.replace('/test/', '/')
 
       let template, render
       if (!isProd) {
@@ -90,8 +92,8 @@ async function createServer(
 
 if (!isTest) {
   createServer().then(({ app }) =>
-    app.listen(5173, () => {
-      console.log('http://localhost:5173')
+    app.listen(6173, () => {
+      console.log('http://localhost:6173')
     })
   )
 }

playground/ssr-vue/src/entry-server.js

@@ -1,6 +1,6 @@
-import { createApp } from './main'
+import { basename } from 'path'
 import { renderToString } from 'vue/server-renderer'
-import path, { basename } from 'path'
+import { createApp } from './main'
 
 export async function render(url, manifest) {
   const { app, router } = createApp()

playground/ssr-vue/src/main.js

@@ -1,5 +1,5 @@
-import App from './App.vue'
 import { createSSRApp } from 'vue'
+import App from './App.vue'
 import { createRouter } from './router'
 
 // SSR requires a fresh app instance per request, therefore we export a function

playground/ssr-vue/src/router.js

@@ -1,6 +1,6 @@
 import {
-  createMemoryHistory,
   createRouter as _createRouter,
+  createMemoryHistory,
   createWebHistory
 } from 'vue-router'
 
@@ -20,7 +20,9 @@ export function createRouter() {
   return _createRouter({
     // use appropriate history implementation for server/client
     // import.meta.env.SSR is injected by Vite.
-    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    history: import.meta.env.SSR
+      ? createMemoryHistory('/test/')
+      : createWebHistory('/test/'),
     routes
   })
 }

playground/ssr-vue/vite.config.js

@@ -9,6 +9,7 @@ const nestedVirtualId = '\0' + nestedVirtualFile
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: '/test/',
   plugins: [
     vuePlugin(),
     vueJsx(),