From 37eb5b3efd3ac4ae91daa7ad4df1ba87bcafbeff Mon Sep 17 00:00:00 2001 From: yoho Date: Sun, 29 May 2022 04:19:33 +0800 Subject: [PATCH] fix: ssr-manifest no base (#8371) --- .../vite/src/node/ssr/ssrManifestPlugin.ts | 2 +- playground/ssr-vue/__tests__/serve.ts | 2 + playground/ssr-vue/__tests__/ssr-vue.spec.ts | 53 ++++++++++--------- playground/ssr-vue/server.js | 8 +-- playground/ssr-vue/src/entry-server.js | 4 +- playground/ssr-vue/src/main.js | 2 +- playground/ssr-vue/src/router.js | 6 ++- playground/ssr-vue/vite.config.js | 1 + 8 files changed, 43 insertions(+), 35 deletions(-) diff --git a/packages/vite/src/node/ssr/ssrManifestPlugin.ts b/packages/vite/src/node/ssr/ssrManifestPlugin.ts index 993fae1632ed5d..8bb9a8bcff75dc 100644 --- a/packages/vite/src/node/ssr/ssrManifestPlugin.ts +++ b/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) } diff --git a/playground/ssr-vue/__tests__/serve.ts b/playground/ssr-vue/__tests__/serve.ts index c00a0359c5cd74..3e9e7f235cf2ab 100644 --- a/playground/ssr-vue/__tests__/serve.ts +++ b/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: { diff --git a/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/playground/ssr-vue/__tests__/ssr-vue.spec.ts index 4988241581a4a0..6b744386124718 100644 --- a/playground/ssr-vue/__tests__/ssr-vue.spec.ts +++ b/playground/ssr-vue/__tests__/ssr-vue.spec.ts @@ -10,20 +10,20 @@ 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) => { @@ -31,27 +31,27 @@ test('/about', async () => { }) // 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(), diff --git a/playground/ssr-vue/server.js b/playground/ssr-vue/server.js index a626f8299be022..22077e1f7ae8bc 100644 --- a/playground/ssr-vue/server.js +++ b/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') }) ) } diff --git a/playground/ssr-vue/src/entry-server.js b/playground/ssr-vue/src/entry-server.js index 0f4e47711c17a1..f86798a39da6c2 100644 --- a/playground/ssr-vue/src/entry-server.js +++ b/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() diff --git a/playground/ssr-vue/src/main.js b/playground/ssr-vue/src/main.js index dbf4287b0baf3c..ee969e0f1c449e 100644 --- a/playground/ssr-vue/src/main.js +++ b/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 diff --git a/playground/ssr-vue/src/router.js b/playground/ssr-vue/src/router.js index b80b76b0bf4e2a..814098102d7899 100644 --- a/playground/ssr-vue/src/router.js +++ b/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 }) } diff --git a/playground/ssr-vue/vite.config.js b/playground/ssr-vue/vite.config.js index 83128683536388..dd3ff761d3476e 100644 --- a/playground/ssr-vue/vite.config.js +++ b/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(),