diff --git a/__tests__/base/relative-file.test.ts b/__tests__/base/relative-file.test.ts index b408773e..7e839416 100644 --- a/__tests__/base/relative-file.test.ts +++ b/__tests__/base/relative-file.test.ts @@ -22,8 +22,8 @@ afterAll(async () => { await t.browser.close() }) -// no hydration over file:// — module scripts are CORS-blocked from disk in -// every engine — but the pre-rendered site must stay styled and navigable +// module scripts are cors-blocked from disk, so nothing hydrates here; the +// pre-rendered site must still be styled and navigable describe('relative base opened over file://', () => { test('pages render styled with working images', async () => { await t.page.goto(fileUrl('sub/page.html')) diff --git a/__tests__/base/relative-spa.test.ts b/__tests__/base/relative-spa.test.ts index f7ce9a5d..04e0732e 100644 --- a/__tests__/base/relative-spa.test.ts +++ b/__tests__/base/relative-spa.test.ts @@ -14,7 +14,8 @@ afterAll(async () => { await t.browser.close() }) -// mark the window so a passing test proves navigation stayed client-side +// mark the window with a marker that only survives client-side navigation, +// proving no full document reload occurred const mark = () => t.page.evaluate(() => ((window as any).__spa_marker = 1)) const marked = () => t.page.evaluate(() => (window as any).__spa_marker === 1) diff --git a/__tests__/base/vitest.config.ts b/__tests__/base/vitest.config.ts index 1d664b4c..43f17310 100644 --- a/__tests__/base/vitest.config.ts +++ b/__tests__/base/vitest.config.ts @@ -9,7 +9,6 @@ export default defineConfig({ hookTimeout: timeout, teardownTimeout: timeout, globals: true, - // suites share fixture builds but not servers/pages; keep them serial fileParallelism: false } }) diff --git a/__tests__/base/vitestGlobalSetup.ts b/__tests__/base/vitestGlobalSetup.ts index fa13458d..0f7e5d0c 100644 --- a/__tests__/base/vitestGlobalSetup.ts +++ b/__tests__/base/vitestGlobalSetup.ts @@ -58,14 +58,12 @@ let browserServer: BrowserServer let servers: Server[] = [] export async function setup() { - // the cdn server starts before its dist exists (requests just 404 until - // the build lands) so the real port can be baked into assetsBase + // started before its dist exists so its real port can go into assetsBase const cdnServer = await serveStatic([['/', dist('cdn')]], true) const cdnPort = portOf(cdnServer) - // each flavor builds in its own process: the markdown renderer is a - // process-wide singleton, so sequential in-process builds would leak the - // first build's base into the rest + // one process per flavor: the markdown renderer is a module-level + // singleton, so in-process builds would leak the first base into the rest for (const mode of ['plain', 'relative', 'cdn', 'mpa']) { const res = spawnSync(process.execPath, [bin, 'build', 'fixture'], { cwd: dir, diff --git a/docs/en/guide/asset-handling.md b/docs/en/guide/asset-handling.md index b32990dd..76b0c1c4 100644 --- a/docs/en/guide/asset-handling.md +++ b/docs/en/guide/asset-handling.md @@ -36,23 +36,15 @@ Note that you should reference files placed in `public` using root absolute path ## Base URL -If your site is deployed to a non-root URL, you will need to set the `base` option in `.vitepress/config.js`. For example, if you plan to deploy your site to `https://foo.github.io/bar/`, then `base` should be set to `'/bar/'` (it should always start and end with a slash). +If your site is deployed to a non-root URL, set the [`base`](../reference/site-config#base) option. For example, if you plan to deploy your site to `https://foo.github.io/bar/`, then `base` should be set to `'/bar/'` -All your static asset paths are automatically processed to adjust for different `base` config values. For example, if you have an absolute reference to an asset under `public` in your markdown: +Static asset references are automatically adjusted for the base, so an absolute reference to a file in `public` works with any `base` and never needs updating: ```md ![An image](/image-inside-public.png) ``` -You do **not** need to update it when you change the `base` config value in this case. This includes a relative base (`'./'`), which makes the whole build [relocatable](./deploy#relocatable-builds-relative-base). - -However, if you are authoring a theme component that links to assets dynamically, e.g. an image whose `src` is based on a theme config value: - -```vue - -``` - -In this case it is recommended to wrap the path with the [`withBase` helper](../reference/runtime-api#withbase) provided by VitePress: +Only dynamically constructed paths need care — for example, an image whose `src` is based on a theme config value. Wrap those with the [`withBase` helper](../reference/runtime-api#withbase) so the base is prepended at runtime: ```vue