fix: different production base path does not work

add test-case which uses a base-path

packages/playground/base-path/__tests__/base-path.spec.ts

@@ -0,0 +1,14 @@
+import { readFile, untilUpdated, isBuild } from '../../testUtils'
+
+test('should work', async () => {
+  await page.click('.clickme')
+  await untilUpdated(() => page.textContent('.content'), '3', true)
+})
+
+if (isBuild) {
+  test('should have relative path', async () => {
+    expect(readFile('dist/foo/assets/index.js')).toMatch(
+      /.*\.\/assets\/preload\.js.*/
+    )
+  })
+}

packages/playground/base-path/dep.js

@@ -0,0 +1,5 @@
+import preload from './preload'
+
+export function test() {
+  return 1 + preload()
+}

packages/playground/base-path/index.html

@@ -0,0 +1,4 @@
+<script type="module" src="./main.js"></script>
+
+<button class="clickme">Click me</button>
+<div class="content"></div>

packages/playground/base-path/main.js

@@ -0,0 +1,4 @@
+document.querySelector('.clickme').addEventListener('click', async () => {
+  const { test } = await import('./dep.js')
+  document.querySelector('.content').textContent = test()
+})

packages/playground/base-path/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "base-path",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}

packages/playground/base-path/preload.js

@@ -0,0 +1,3 @@
+export default function () {
+  return 2
+}

packages/playground/base-path/vite.config.js

@@ -0,0 +1,24 @@
+const { resolve } = require('path')
+
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  base: '/foo/',
+  build: {
+    // simulate production environment
+    outDir: 'dist/foo',
+    // prevent bundling of dep and preload to ensure that vite-preloading occurs
+    rollupOptions: {
+      input: [
+        resolve(__dirname, 'index.html'),
+        resolve(__dirname, 'preload.js'),
+        resolve(__dirname, 'dep.js')
+      ],
+      // use simple entry names for easier reference inside the tests
+      output: {
+        entryFileNames: 'assets/[name].js'
+      }
+    }
+  }
+}

packages/vite/src/node/plugins/importAnalysisBuild.ts

@@ -242,11 +242,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   analyzed.add(filename)
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
-                    deps.add(config.base + chunk.fileName)
+                    // use a relative path https://github.com/vitejs/vite/pull/3061
+                    deps.add('./' + chunk.fileName)
                     const cssFiles = chunkToEmittedCssFileMap.get(chunk)
                     if (cssFiles) {
                       cssFiles.forEach((file) => {
-                        deps.add(config.base + file)
+                        // use a relative path https://github.com/vitejs/vite/pull/3061
+                        deps.add('./' + file)
                       })
                     }
                     chunk.imports.forEach(addDeps)
@@ -267,10 +269,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   // the dep list includes the main chunk, so only need to
                   // preload when there are actual other deps.
                   deps.size > 1
-                    ? `[${[...deps]
-                        // replace leading slashes to ensure a relative path. See https://github.com/vitejs/vite/pull/3061
-                        .map((d) => JSON.stringify(d.replace(/^\//, './')))
-                        .join(',')}]`
+                    ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
                     : `void 0`
                 )
               }