diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index bb48bf9c307fd6..f6db9c4b4cbc5c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -89,6 +89,7 @@ module.exports = defineConfig({
       { prefer: 'type-imports' }
     ],
 
+    'import/no-duplicates': 'error',
     'import/order': 'error',
     'sort-imports': [
       'error',
@@ -114,6 +115,12 @@ module.exports = defineConfig({
         'node/no-extraneous-import': 'off'
       }
     },
+    {
+      files: ['packages/plugin-*/**/*'],
+      rules: {
+        'no-restricted-globals': ['error', 'require', '__dirname', '__filename']
+      }
+    },
     {
       files: ['playground/**'],
       rules: {
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 4659ea5ab7ae4f..5023b3cdc328d9 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -3,17 +3,42 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   title: 'Vite',
   description: 'Next Generation Frontend Tooling',
-  head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
+
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+
+    // TODO: This is neeeded to get smooth dark mode appearance on initial
+    // load. And this will be gone when VitePress figures out how to handle
+    // this in core.
+    [
+      'script',
+      {},
+      `
+        ;(() => {
+          const saved = localStorage.getItem('vitepress-theme-appearance')
+          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+            document.documentElement.classList.add('dark')
+          }
+        })()
+      `
+    ]
+  ],
+
   vue: {
     reactivityTransform: true
   },
+
   themeConfig: {
-    repo: 'vitejs/vite',
     logo: '/logo.svg',
-    docsDir: 'docs',
-    docsBranch: 'main',
-    editLinks: true,
-    editLinkText: 'Suggest changes to this page',
+
+    editLink: {
+      repo: 'vitejs/vite',
+      branch: 'main',
+      dir: 'docs',
+      text: 'Suggest changes to this page'
+    },
 
     algolia: {
       apiKey: 'b573aa848fd57fb47d693b531297403c',
@@ -28,6 +53,14 @@ export default defineConfig({
       placement: 'vitejsdev'
     },
 
+    localeLinks: {
+      text: 'English',
+      items: [
+        { text: '简体中文', link: 'https://cn.vitejs.dev' },
+        { text: '日本語', link: 'https://ja.vitejs.dev' }
+      ]
+    },
+
     nav: [
       { text: 'Guide', link: '/guide/' },
       { text: 'Config', link: '/config/' },
@@ -69,34 +102,14 @@ export default defineConfig({
             link: 'https://v2.vitejs.dev'
           }
         ]
-      },
-      {
-        text: 'Languages',
-        items: [
-          {
-            text: 'English',
-            link: 'https://vitejs.dev'
-          },
-          {
-            text: '简体中文',
-            link: 'https://cn.vitejs.dev'
-          },
-          {
-            text: '日本語',
-            link: 'https://ja.vitejs.dev'
-          }
-        ]
       }
     ],
 
     sidebar: {
-      '/config/': 'auto',
-      '/plugins': 'auto',
-      // catch-all fallback
       '/': [
         {
           text: 'Guide',
-          children: [
+          items: [
             {
               text: 'Why Vite',
               link: '/guide/why'
@@ -153,7 +166,7 @@ export default defineConfig({
         },
         {
           text: 'APIs',
-          children: [
+          items: [
             {
               text: 'Plugin API',
               link: '/guide/api-plugin'
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.ts
similarity index 84%
rename from docs/.vitepress/theme/index.js
rename to docs/.vitepress/theme/index.ts
index babdc165f30ed8..4c75157f96c18e 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,8 @@
-import Theme from 'vitepress/theme'
 import { h } from 'vue'
+import Theme from 'vitepress/theme'
 import SponsorsSidebar from './SponsorsSidebar.vue'
-import './custom.css'
+import './styles/vars.css'
+import './styles/custom.css'
 
 export default {
   ...Theme,
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/styles/custom.css
similarity index 70%
rename from docs/.vitepress/theme/custom.css
rename to docs/.vitepress/theme/styles/custom.css
index 098a29853b4a49..2678c12e6b4283 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/styles/custom.css
@@ -16,17 +16,12 @@
   display: none;
 }
 
-:root {
-  --c-brand: #646cff;
-  --c-brand-light: #747bff;
-}
-
 .custom-block.tip {
-  border-color: var(--c-brand-light);
+  border-color: var(--vp-c-brand-light);
 }
 
 .DocSearch {
-  --docsearch-primary-color: var(--c-brand) !important;
+  --docsearch-primary-color: var(--vp-c-brand) !important;
 }
 
 #play-vite-audio {
diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css
new file mode 100644
index 00000000000000..1d2dc2b93d8a96
--- /dev/null
+++ b/docs/.vitepress/theme/styles/vars.css
@@ -0,0 +1,5 @@
+:root {
+  --vp-c-brand: #646cff;
+  --vp-c-brand-light: #747bff;
+  --vp-c-brand-dark: #535bf2;
+}
diff --git a/docs/config/index.md b/docs/config/index.md
index 1c61f2bef5b7ac..5eeee78a37ffef 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -712,7 +712,6 @@ createServer()
 
 ### server.fs.deny
 
-- **Experimental**
 - **Type:** `string[]`
 
   Blocklist for sensitive files being restricted to be served by Vite dev server.
@@ -741,11 +740,11 @@ export default defineConfig({
 - **Default:** `'modules'`
 - **Related:** [Browser Compatibility](/guide/build#browser-compatibility)
 
-  Browser compatibility target for the final bundle. The default value is a Vite special value, `'modules'`, which targets [browsers with native ES module support](https://caniuse.com/es6-module).
+  Browser compatibility target for the final bundle. The default value is a Vite special value, `'modules'`, which targets browsers with [native ES Modules](https://caniuse.com/es6-module) and [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import) support.
 
   Another special value is `'esnext'` - which assumes native dynamic imports support and will transpile as little as possible:
 
-  - If the [`build.minify`](#build-minify) option is `'terser'`, `'esnext'` will be forced down to `'es2019'`.
+  - If the [`build.minify`](#build-minify) option is `'terser'`, `'esnext'` will be forced down to `'es2021'`.
   - In other cases, it will perform no transpilation at all.
 
   The transform is performed with esbuild and the value should be a valid [esbuild target option](https://esbuild.github.io/api/#target). Custom targets can either be a ES version (e.g. `es2015`), a browser with version (e.g. `chrome58`), or an array of multiple target strings.
diff --git a/docs/guide/api-javascript.md b/docs/guide/api-javascript.md
index 0128be26bd92ba..33202e0d608238 100644
--- a/docs/guide/api-javascript.md
+++ b/docs/guide/api-javascript.md
@@ -30,6 +30,10 @@ const { createServer } = require('vite')
 })()
 ```
 
+::: tip NOTE
+When using `createServer` and `build` in the same Node.js process, both functions rely on `process.env.`<wbr>`NODE_ENV` to work properly, which also depends on the `mode` config option. To prevent conflicting behavior, set `process.env.`<wbr>`NODE_ENV` or the `mode` of the two APIs to `development`. Otherwise, you can spawn a child process to run the APIs separately.
+:::
+
 ## `InlineConfig`
 
 The `InlineConfig` interface extends `UserConfig` with additional properties:
@@ -148,8 +152,6 @@ const { build } = require('vite')
 
 ## `preview`
 
-**Experimental**
-
 **Type Signature:**
 
 ```ts
diff --git a/docs/guide/assets.md b/docs/guide/assets.md
index 9776dcdd032f35..34e86924362add 100644
--- a/docs/guide/assets.md
+++ b/docs/guide/assets.md
@@ -114,6 +114,6 @@ const imgUrl = new URL(imagePath, import.meta.url).href
 This pattern does not work if you are using Vite for Server-Side Rendering, because `import.meta.url` have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.
 :::
 
-::: warning Esbuild target config is necessary
-This pattern needs esbuild target to be set to `es2020` or higher. `vite@2.x` use `es2019` as default target. Set [build-target](https://vitejs.dev/config/#build-target) and [optimizedeps.esbuildoptions.target](https://vitejs.dev/config/#optimizedeps-esbuildoptions) to `es2020` or higher if you intend to use this partten.
+::: warning `target` needs to be `es2020` or higher
+This pattern will not work if [build-target](https://vitejs.dev/config/#build-target) or [optimizedeps.esbuildoptions.target](https://vitejs.dev/config/#optimizedeps-esbuildoptions) is set to a value lower than `es2020`.
 :::
diff --git a/docs/guide/build.md b/docs/guide/build.md
index 358745d02f2cf1..578b8f495c41fb 100644
--- a/docs/guide/build.md
+++ b/docs/guide/build.md
@@ -4,11 +4,12 @@ When it is time to deploy your app for production, simply run the `vite build` c
 
 ## Browser Compatibility
 
-The production bundle assumes support for modern JavaScript. By default, Vite targets browsers which support the [native ESM script tag](https://caniuse.com/es6-module) and [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import). As a reference, Vite uses this [browserslist](https://github.com/browserslist/browserslist) query:
+The production bundle assumes support for modern JavaScript. By default, Vite targets browsers which support the [native ES Modules](https://caniuse.com/es6-module) and [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import) and [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta):
 
-```
-defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0
-```
+- Chrome >=87
+- Firefox >=78
+- Safari >=13
+- Edge >=88
 
 You can specify custom targets via the [`build.target` config option](/config/#build-target), where the lowest target is `es2015`.
 
diff --git a/docs/guide/features.md b/docs/guide/features.md
index bb8179e75073f5..ef0610111b9709 100644
--- a/docs/guide/features.md
+++ b/docs/guide/features.md
@@ -435,13 +435,13 @@ Note that variables only represent file names one level deep. If `file` is `'foo
 
 ## WebAssembly
 
-Pre-compiled `.wasm` files can be directly imported - the default export will be an initialization function that returns a Promise of the exports object of the wasm instance:
+Pre-compiled `.wasm` files can be imported with `?init` - the default export will be an initialization function that returns a Promise of the wasm instance:
 
 ```js
-import init from './example.wasm'
+import init from './example.wasm?init'
 
-init().then((exports) => {
-  exports.test()
+init().then((instance) => {
+  instance.exports.test()
 })
 ```
 
@@ -461,6 +461,11 @@ init({
 
 In the production build, `.wasm` files smaller than `assetInlineLimit` will be inlined as base64 strings. Otherwise, they will be copied to the dist directory as an asset and fetched on-demand.
 
+::: warning
+[ES Module Integration Proposal for WebAssembly](https://github.com/WebAssembly/esm-integration) is not currently supported.
+Use [`vite-plugin-wasm`](https://github.com/Menci/vite-plugin-wasm) or other community plugins to handle this.
+:::
+
 ## Web Workers
 
 ### Import with Constructors
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 338bd42a565aa3..ab45ceb7f85475 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -18,7 +18,7 @@ You can learn more about the rationale behind the project in the [Why Vite](./wh
 
 ## Browser Support
 
-- The default build targets browsers that support both [native ESM via script tags](https://caniuse.com/es6-module) and [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import). Legacy browsers can be supported via the official [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) - see the [Building for Production](./build) section for more details.
+- The default build targets browsers that support both [native ES Modules](https://caniuse.com/es6-module) and [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import). Legacy browsers can be supported via the official [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) - see the [Building for Production](./build) section for more details.
 
 ## Trying Vite Online
 
@@ -145,4 +145,4 @@ Then go to your Vite based project and run `pnpm link --global vite` (or the pac
 
 ## Community
 
-If you have questions or need help, reach out to the community at [Discord](https://discord.gg/4cmKdMfpU5) and [GitHub Discussions](https://github.com/vitejs/vite/discussions).
+If you have questions or need help, reach out to the community at [Discord](https://chat.vitejs.dev) and [GitHub Discussions](https://github.com/vitejs/vite/discussions).
diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md
index 319b461022433d..ee078e82eb60a1 100644
--- a/docs/guide/ssr.md
+++ b/docs/guide/ssr.md
@@ -169,7 +169,7 @@ Our scripts in `package.json` will look like this:
 
 Note the `--ssr` flag which indicates this is an SSR build. It should also specify the SSR entry.
 
-Then, in `server.js` we need to add some production specific logic by checking `process.env.NODE_ENV`:
+Then, in `server.js` we need to add some production specific logic by checking `process.env.`<wbr>`NODE_ENV`:
 
 - Instead of reading the root `index.html`, use the `dist/client/index.html` as the template instead, since it contains the correct asset links to the client build.
 
diff --git a/docs/index.md b/docs/index.md
index ce1678de00404e..f1e950b19e8582 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -23,6 +23,8 @@ features:
 footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
 ---
 
+> TODO: Home Page feature is not ready in VitePress Next just yet! So this page looks broken for now.
+
 <script setup>
 import SponsorsGroup from './.vitepress/theme/SponsorsGroup.vue'
 </script>
diff --git a/package.json b/package.json
index dd19523dfdc497..9144ab4d6e9590 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",
     "playwright-chromium": "^1.21.1",
+    "pnpm": "^7.1.2",
     "prettier": "2.6.2",
     "prompts": "^2.4.2",
     "rimraf": "^3.0.2",
@@ -83,7 +84,7 @@
     "typescript": "^4.6.4",
     "unbuild": "^0.7.4",
     "vite": "workspace:*",
-    "vitepress": "^0.22.4",
+    "vitepress": "1.0.0-draft.1",
     "vitest": "^0.12.4",
     "vue": "^3.2.33"
   },
diff --git a/packages/create-vite/template-lit-ts/tsconfig.json b/packages/create-vite/template-lit-ts/tsconfig.json
index 91a731fd8619d4..b080b2b2cd41a7 100644
--- a/packages/create-vite/template-lit-ts/tsconfig.json
+++ b/packages/create-vite/template-lit-ts/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "module": "esnext",
-    "lib": ["es2017", "dom", "dom.iterable"],
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "./types",
@@ -10,7 +10,7 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
     "isolatedModules": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
diff --git a/packages/create-vite/template-lit-ts/tsconfig.node.json b/packages/create-vite/template-lit-ts/tsconfig.node.json
index e993792cb12c9d..65dbdb96ae5dcf 100644
--- a/packages/create-vite/template-lit-ts/tsconfig.node.json
+++ b/packages/create-vite/template-lit-ts/tsconfig.node.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
+    "module": "ESNext",
+    "moduleResolution": "Node"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/packages/create-vite/template-preact-ts/tsconfig.node.json b/packages/create-vite/template-preact-ts/tsconfig.node.json
index e993792cb12c9d..65dbdb96ae5dcf 100644
--- a/packages/create-vite/template-preact-ts/tsconfig.node.json
+++ b/packages/create-vite/template-preact-ts/tsconfig.node.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
+    "module": "ESNext",
+    "moduleResolution": "Node"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/packages/create-vite/template-react-ts/src/main.tsx b/packages/create-vite/template-react-ts/src/main.tsx
index 4a1b15096e15b1..611e848f1a3e9c 100644
--- a/packages/create-vite/template-react-ts/src/main.tsx
+++ b/packages/create-vite/template-react-ts/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
diff --git a/packages/create-vite/template-react-ts/tsconfig.node.json b/packages/create-vite/template-react-ts/tsconfig.node.json
index e993792cb12c9d..65dbdb96ae5dcf 100644
--- a/packages/create-vite/template-react-ts/tsconfig.node.json
+++ b/packages/create-vite/template-react-ts/tsconfig.node.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
+    "module": "ESNext",
+    "moduleResolution": "Node"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/packages/create-vite/template-svelte-ts/tsconfig.json b/packages/create-vite/template-svelte-ts/tsconfig.json
index 96bfd81aaf1203..d38303196ae8dc 100644
--- a/packages/create-vite/template-svelte-ts/tsconfig.json
+++ b/packages/create-vite/template-svelte-ts/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "module": "esnext",
+    "module": "ESNext",
     "resolveJsonModule": true,
     "baseUrl": ".",
     /**
diff --git a/packages/create-vite/template-svelte-ts/tsconfig.node.json b/packages/create-vite/template-svelte-ts/tsconfig.node.json
index e993792cb12c9d..65dbdb96ae5dcf 100644
--- a/packages/create-vite/template-svelte-ts/tsconfig.node.json
+++ b/packages/create-vite/template-svelte-ts/tsconfig.node.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
+    "module": "ESNext",
+    "moduleResolution": "Node"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/packages/create-vite/template-svelte/jsconfig.json b/packages/create-vite/template-svelte/jsconfig.json
index 42585941e160b7..ee5e92f298e484 100644
--- a/packages/create-vite/template-svelte/jsconfig.json
+++ b/packages/create-vite/template-svelte/jsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "moduleResolution": "node",
-    "target": "esnext",
-    "module": "esnext",
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
     /**
      * svelte-preprocess cannot figure out whether you have
      * a value or a type, so tell TypeScript to enforce using
diff --git a/packages/create-vite/template-vue-ts/tsconfig.json b/packages/create-vite/template-vue-ts/tsconfig.json
index bcc4abda4c57f0..d4aefa2c929dc2 100644
--- a/packages/create-vite/template-vue-ts/tsconfig.json
+++ b/packages/create-vite/template-vue-ts/tsconfig.json
@@ -1,16 +1,16 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
diff --git a/packages/create-vite/template-vue-ts/tsconfig.node.json b/packages/create-vite/template-vue-ts/tsconfig.node.json
index e993792cb12c9d..65dbdb96ae5dcf 100644
--- a/packages/create-vite/template-vue-ts/tsconfig.node.json
+++ b/packages/create-vite/template-vue-ts/tsconfig.node.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
+    "module": "ESNext",
+    "moduleResolution": "Node"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/packages/plugin-legacy/CHANGELOG.md b/packages/plugin-legacy/CHANGELOG.md
index 19bb068cc9502b..3332625765af00 100644
--- a/packages/plugin-legacy/CHANGELOG.md
+++ b/packages/plugin-legacy/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 2.0.0-alpha.1 (2022-05-19)
+
+* fix: rewrite CJS specific funcs/vars in plugins (#8227) ([9baa70b](https://github.com/vitejs/vite/commit/9baa70b)), closes [#8227](https://github.com/vitejs/vite/issues/8227)
+* fix(plugin-legacy): fail to get the fileName (#5250) ([c7fc1d4](https://github.com/vitejs/vite/commit/c7fc1d4)), closes [#5250](https://github.com/vitejs/vite/issues/5250)
+* build!: bump targets (#8045) ([66efd69](https://github.com/vitejs/vite/commit/66efd69)), closes [#8045](https://github.com/vitejs/vite/issues/8045)
+* feat!: relative base (#7644) ([09648c2](https://github.com/vitejs/vite/commit/09648c2)), closes [#7644](https://github.com/vitejs/vite/issues/7644)
+* docs: use latest core-js unpkg link (#8190) ([102b678](https://github.com/vitejs/vite/commit/102b678)), closes [#8190](https://github.com/vitejs/vite/issues/8190)
+
+
+
 ## 2.0.0-alpha.0 (2022-05-13)
 
 * chore: bump minors and rebuild lock (#8074) ([aeb5b74](https://github.com/vitejs/vite/commit/aeb5b74)), closes [#8074](https://github.com/vitejs/vite/issues/8074)
diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md
index fc4167f4f1010f..bd581052e88801 100644
--- a/packages/plugin-legacy/README.md
+++ b/packages/plugin-legacy/README.md
@@ -122,9 +122,9 @@ The legacy plugin offers a way to use native `import()` in the modern build whil
 
 Polyfill specifier strings for `polyfills` and `modernPolyfills` can be either of the following:
 
-- Any [`core-js` 3 sub import paths](https://unpkg.com/browse/core-js@3.8.2/) - e.g. `es/map` will import `core-js/es/map`
+- Any [`core-js` 3 sub import paths](https://unpkg.com/browse/core-js@latest/) - e.g. `es/map` will import `core-js/es/map`
 
-- Any [individual `core-js` 3 modules](https://unpkg.com/browse/core-js@3.8.2/modules/) - e.g. `es.array.iterator` will import `core-js/modules/es.array.iterator.js`
+- Any [individual `core-js` 3 modules](https://unpkg.com/browse/core-js@latest/modules/) - e.g. `es.array.iterator` will import `core-js/modules/es.array.iterator.js`
 
 **Example**
 
diff --git a/packages/plugin-legacy/package.json b/packages/plugin-legacy/package.json
index 139253a9d9a795..bea89ef7bc492d 100644
--- a/packages/plugin-legacy/package.json
+++ b/packages/plugin-legacy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-legacy",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "license": "MIT",
   "author": "Evan You",
   "files": [
diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index 5fedb716f04f86..8e0cbf54a34333 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -1,6 +1,8 @@
 /* eslint-disable node/no-extraneous-import */
 import path from 'path'
 import { createHash } from 'crypto'
+import { createRequire } from 'module'
+import { fileURLToPath } from 'url'
 import { build } from 'vite'
 import MagicString from 'magic-string'
 import type {
@@ -37,9 +39,9 @@ const legacyPolyfillId = 'vite-legacy-polyfill'
 const legacyEntryId = 'vite-legacy-entry'
 const systemJSInlineCode = `System.import(document.getElementById('${legacyEntryId}').getAttribute('data-src'))`
 
-const detectDynamicImportVarName = '__vite_is_dynamic_import_support'
-const detectDynamicImportCode = `try{import("_").catch(()=>1);}catch(e){}window.${detectDynamicImportVarName}=true;`
-const dynamicFallbackInlineCode = `!function(){if(window.${detectDynamicImportVarName})return;console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("${legacyPolyfillId}"),n=document.createElement("script");n.src=e.src,n.onload=function(){${systemJSInlineCode}},document.body.appendChild(n)}();`
+const detectModernBrowserVarName = '__vite_is_modern_browser'
+const detectModernBrowserCode = `try{import(new URL(import.meta.url).href).catch(()=>1);}catch(e){}window.${detectModernBrowserVarName}=true;`
+const dynamicFallbackInlineCode = `!function(){if(window.${detectModernBrowserVarName})return;console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");var e=document.getElementById("${legacyPolyfillId}"),n=document.createElement("script");n.src=e.src,n.onload=function(){${systemJSInlineCode}},document.body.appendChild(n)}();`
 
 const forceDynamicImportUsage = `export function __vite_legacy_guard(){import('data:text/javascript,')};`
 
@@ -129,11 +131,12 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
             modernPolyfills
           )
         await buildPolyfillChunk(
-          'polyfills-modern',
           modernPolyfills,
           bundle,
           facadeToModernPolyfillMap,
           config.build,
+          'es',
+          opts,
           options.externalSystemJS
         )
         return
@@ -158,19 +161,21 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           )
 
         await buildPolyfillChunk(
-          'polyfills-legacy',
           legacyPolyfills,
           bundle,
           facadeToLegacyPolyfillMap,
           // force using terser for legacy polyfill minification, since esbuild
           // isn't legacy-safe
           config.build,
+          'iife',
+          opts,
           options.externalSystemJS
         )
       }
     }
   }
 
+  const _require = createRequire(import.meta.url)
   const legacyPostPlugin: Plugin = {
     name: 'vite:legacy-post-process',
     enforce: 'post',
@@ -306,7 +311,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       const { code, map } = babel.transform(raw, {
         babelrc: false,
         configFile: false,
-        compact: true,
+        compact: !!config.build.minify,
         sourceMaps,
         inputSourceMap: sourceMaps ? chunk.map : undefined,
         presets: [
@@ -331,7 +336,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
               useBuiltIns: needPolyfills ? 'usage' : false,
               corejs: needPolyfills
                 ? {
-                    version: require('core-js/package.json').version,
+                    version: _require('core-js/package.json').version,
                     proposals: false
                   }
                 : undefined,
@@ -438,7 +443,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         tags.push({
           tag: 'script',
           attrs: { type: 'module' },
-          children: detectDynamicImportCode,
+          children: detectModernBrowserCode,
           injectTo: 'head'
         })
         tags.push({
@@ -546,18 +551,19 @@ export async function detectPolyfills(
 }
 
 async function buildPolyfillChunk(
-  name: string,
   imports: Set<string>,
   bundle: OutputBundle,
   facadeToChunkMap: Map<string, string>,
   buildOptions: BuildOptions,
+  format: 'iife' | 'es',
+  rollupOutputOptions: NormalizedOutputOptions,
   externalSystemJS?: boolean
 ) {
   let { minify, assetsDir } = buildOptions
   minify = minify ? 'terser' : false
   const res = await build({
     // so that everything is resolved from here
-    root: __dirname,
+    root: path.dirname(fileURLToPath(import.meta.url)),
     configFile: false,
     logLevel: 'error',
     plugins: [polyfillsPlugin(imports, externalSystemJS)],
@@ -568,10 +574,11 @@ async function buildPolyfillChunk(
       assetsDir,
       rollupOptions: {
         input: {
-          [name]: polyfillId
+          polyfills: polyfillId
         },
         output: {
-          format: name.includes('legacy') ? 'iife' : 'es',
+          format,
+          entryFileNames: rollupOutputOptions.entryFileNames,
           manualChunks: undefined
         }
       }
@@ -591,7 +598,7 @@ async function buildPolyfillChunk(
   }
 
   // add the chunk to the bundle
-  bundle[polyfillChunk.name] = polyfillChunk
+  bundle[polyfillChunk.fileName] = polyfillChunk
 }
 
 const polyfillId = '\0vite/legacy-polyfills'
@@ -686,7 +693,7 @@ function wrapIIFEBabelPlugin(): BabelPlugin {
 export const cspHashes = [
   createHash('sha256').update(safari10NoModuleFix).digest('base64'),
   createHash('sha256').update(systemJSInlineCode).digest('base64'),
-  createHash('sha256').update(detectDynamicImportCode).digest('base64'),
+  createHash('sha256').update(detectModernBrowserCode).digest('base64'),
   createHash('sha256').update(dynamicFallbackInlineCode).digest('base64')
 ]
 
diff --git a/packages/plugin-legacy/tsconfig.json b/packages/plugin-legacy/tsconfig.json
index c20adf0da4b86f..ddb60f864b7e6d 100644
--- a/packages/plugin-legacy/tsconfig.json
+++ b/packages/plugin-legacy/tsconfig.json
@@ -3,8 +3,8 @@
   "exclude": ["**/*.spec.ts"],
   "compilerOptions": {
     "outDir": "dist",
-    "target": "ES2018",
-    "module": "CommonJS",
+    "target": "ES2020",
+    "module": "ES2020",
     "moduleResolution": "Node",
     "strict": true,
     "declaration": true,
diff --git a/packages/plugin-react/CHANGELOG.md b/packages/plugin-react/CHANGELOG.md
index a2e396912dc02d..e386d1f48babc8 100644
--- a/packages/plugin-react/CHANGELOG.md
+++ b/packages/plugin-react/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 2.0.0-alpha.1 (2022-05-19)
+
+* fix: rewrite CJS specific funcs/vars in plugins (#8227) ([9baa70b](https://github.com/vitejs/vite/commit/9baa70b)), closes [#8227](https://github.com/vitejs/vite/issues/8227)
+* build!: bump targets (#8045) ([66efd69](https://github.com/vitejs/vite/commit/66efd69)), closes [#8045](https://github.com/vitejs/vite/issues/8045)
+* chore: enable `import/no-duplicates` eslint rule (#8199) ([11243de](https://github.com/vitejs/vite/commit/11243de)), closes [#8199](https://github.com/vitejs/vite/issues/8199)
+
+
+
 ## 2.0.0-alpha.0 (2022-05-13)
 
 * chore: restore-jsx.spec.ts lint (#8004) ([f1af941](https://github.com/vitejs/vite/commit/f1af941)), closes [#8004](https://github.com/vitejs/vite/issues/8004)
diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json
index 98dab8b095de4f..68169a451ccb6e 100644
--- a/packages/plugin-react/package.json
+++ b/packages/plugin-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
diff --git a/packages/plugin-react/src/fast-refresh.ts b/packages/plugin-react/src/fast-refresh.ts
index 6bff7d94fa023b..708021f28a2665 100644
--- a/packages/plugin-react/src/fast-refresh.ts
+++ b/packages/plugin-react/src/fast-refresh.ts
@@ -1,11 +1,13 @@
 import fs from 'fs'
 import path from 'path'
+import { createRequire } from 'module'
 import type { types as t } from '@babel/core'
 
 export const runtimePublicPath = '/@react-refresh'
 
+const _require = createRequire(import.meta.url)
 const reactRefreshDir = path.dirname(
-  require.resolve('react-refresh/package.json')
+  _require.resolve('react-refresh/package.json')
 )
 const runtimeFilePath = path.join(
   reactRefreshDir,
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index df97899522605f..63c950ebf46d8c 100644
--- a/packages/plugin-react/src/index.ts
+++ b/packages/plugin-react/src/index.ts
@@ -41,7 +41,9 @@ export interface Options {
   /**
    * Babel configuration applied in both dev and prod.
    */
-  babel?: BabelOptions
+  babel?:
+    | BabelOptions
+    | ((id: string, options: { ssr?: boolean }) => BabelOptions)
 }
 
 export type BabelOptions = Omit<
@@ -67,13 +69,21 @@ export interface ReactBabelOptions extends BabelOptions {
   }
 }
 
+type ReactBabelHook = (
+  babelConfig: ReactBabelOptions,
+  context: ReactBabelHookContext,
+  config: ResolvedConfig
+) => void
+
+type ReactBabelHookContext = { ssr: boolean; id: string }
+
 declare module 'vite' {
   export interface Plugin {
     api?: {
       /**
        * Manipulate the Babel options of `@vitejs/plugin-react`
        */
-      reactBabel?: (options: ReactBabelOptions, config: ResolvedConfig) => void
+      reactBabel?: ReactBabelHook
     }
   }
 }
@@ -86,21 +96,14 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   let projectRoot = process.cwd()
   let skipFastRefresh = opts.fastRefresh === false
   let skipReactImport = false
+  let runPluginOverrides = (
+    options: ReactBabelOptions,
+    context: ReactBabelHookContext
+  ) => false
+  let staticBabelOptions: ReactBabelOptions | undefined
 
   const useAutomaticRuntime = opts.jsxRuntime !== 'classic'
 
-  const babelOptions = {
-    babelrc: false,
-    configFile: false,
-    ...opts.babel
-  } as ReactBabelOptions
-
-  babelOptions.plugins ||= []
-  babelOptions.presets ||= []
-  babelOptions.overrides ||= []
-  babelOptions.parserOpts ||= {} as any
-  babelOptions.parserOpts.plugins ||= []
-
   // Support patterns like:
   // - import * as React from 'react';
   // - import React from 'react';
@@ -141,11 +144,22 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             `[@vitejs/plugin-react] You should stop using "${plugin.name}" ` +
               `since this plugin conflicts with it.`
           )
+      })
+
+      runPluginOverrides = (babelOptions, context) => {
+        const hooks = config.plugins
+          .map((plugin) => plugin.api?.reactBabel)
+          .filter(Boolean) as ReactBabelHook[]
 
-        if (plugin.api?.reactBabel) {
-          plugin.api.reactBabel(babelOptions, config)
+        if (hooks.length > 0) {
+          return (runPluginOverrides = (babelOptions) => {
+            hooks.forEach((hook) => hook(babelOptions, context, config))
+            return true
+          })(babelOptions)
         }
-      })
+        runPluginOverrides = () => false
+        return false
+      }
     },
     async transform(code, id, options) {
       const ssr = typeof options === 'boolean' ? options : options?.ssr === true
@@ -162,6 +176,18 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         const isProjectFile =
           !isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
 
+        let babelOptions = staticBabelOptions
+        if (typeof opts.babel === 'function') {
+          const rawOptions = opts.babel(id, { ssr })
+          babelOptions = createBabelOptions(rawOptions)
+          runPluginOverrides(babelOptions, { ssr, id: id })
+        } else if (!babelOptions) {
+          babelOptions = createBabelOptions(opts.babel)
+          if (!runPluginOverrides(babelOptions, { ssr, id: id })) {
+            staticBabelOptions = babelOptions
+          }
+        }
+
         const plugins = isProjectFile ? [...babelOptions.plugins] : []
 
         let useFastRefresh = false
@@ -368,3 +394,19 @@ viteReact.preambleCode = preambleCode
 function loadPlugin(path: string): Promise<any> {
   return import(path).then((module) => module.default || module)
 }
+
+function createBabelOptions(rawOptions?: BabelOptions) {
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...rawOptions
+  } as ReactBabelOptions
+
+  babelOptions.plugins ||= []
+  babelOptions.presets ||= []
+  babelOptions.overrides ||= []
+  babelOptions.parserOpts ||= {} as any
+  babelOptions.parserOpts.plugins ||= []
+
+  return babelOptions
+}
diff --git a/packages/plugin-react/src/jsx-runtime/babel-import-to-require.ts b/packages/plugin-react/src/jsx-runtime/babel-import-to-require.ts
index 01e4cc4c37d478..cd6608221512c9 100644
--- a/packages/plugin-react/src/jsx-runtime/babel-import-to-require.ts
+++ b/packages/plugin-react/src/jsx-runtime/babel-import-to-require.ts
@@ -1,5 +1,4 @@
 import type * as babelCore from '@babel/core'
-import type { Visitor, types as t } from '@babel/core'
 
 /**
  * Replace this:
@@ -11,13 +10,13 @@ import type { Visitor, types as t } from '@babel/core'
  *     var _jsx = require("react/jsx-runtime").jsx
  */
 export function babelImportToRequire({ types: t }: typeof babelCore): {
-  visitor: Visitor
+  visitor: babelCore.Visitor
 } {
   return {
     visitor: {
       ImportDeclaration(path) {
         const decl = path.node
-        const spec = decl.specifiers[0] as t.ImportSpecifier
+        const spec = decl.specifiers[0] as babelCore.types.ImportSpecifier
 
         path.replaceWith(
           t.variableDeclaration('var', [
diff --git a/packages/plugin-react/src/jsx-runtime/restore-jsx.ts b/packages/plugin-react/src/jsx-runtime/restore-jsx.ts
index 2c49f508c8b5be..28825918895dde 100644
--- a/packages/plugin-react/src/jsx-runtime/restore-jsx.ts
+++ b/packages/plugin-react/src/jsx-runtime/restore-jsx.ts
@@ -1,9 +1,11 @@
 import type * as babelCore from '@babel/core'
-import type { PluginItem, types as t } from '@babel/core'
 
-type RestoredJSX = [result: t.File | null | undefined, isCommonJS: boolean]
+type RestoredJSX = [
+  result: babelCore.types.File | null | undefined,
+  isCommonJS: boolean
+]
 
-let babelRestoreJSX: Promise<PluginItem> | undefined
+let babelRestoreJSX: Promise<babelCore.PluginItem> | undefined
 
 const jsxNotFound: RestoredJSX = [null, false]
 
diff --git a/packages/plugin-react/tsconfig.json b/packages/plugin-react/tsconfig.json
index c20adf0da4b86f..ddb60f864b7e6d 100644
--- a/packages/plugin-react/tsconfig.json
+++ b/packages/plugin-react/tsconfig.json
@@ -3,8 +3,8 @@
   "exclude": ["**/*.spec.ts"],
   "compilerOptions": {
     "outDir": "dist",
-    "target": "ES2018",
-    "module": "CommonJS",
+    "target": "ES2020",
+    "module": "ES2020",
     "moduleResolution": "Node",
     "strict": true,
     "declaration": true,
diff --git a/packages/plugin-vue-jsx/CHANGELOG.md b/packages/plugin-vue-jsx/CHANGELOG.md
index 70f70a243b326f..57d07e2a1f7802 100644
--- a/packages/plugin-vue-jsx/CHANGELOG.md
+++ b/packages/plugin-vue-jsx/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 2.0.0-alpha.1 (2022-05-19)
+
+* fix: rewrite CJS specific funcs/vars in plugins (#8227) ([9baa70b](https://github.com/vitejs/vite/commit/9baa70b)), closes [#8227](https://github.com/vitejs/vite/issues/8227)
+* build!: bump targets (#8045) ([66efd69](https://github.com/vitejs/vite/commit/66efd69)), closes [#8045](https://github.com/vitejs/vite/issues/8045)
+
+
+
 ## 2.0.0-alpha.0 (2022-05-13)
 
 * chore: revert vitejs/vite#8152 (#8161) ([85b8b55](https://github.com/vitejs/vite/commit/85b8b55)), closes [vitejs/vite#8152](https://github.com/vitejs/vite/issues/8152) [#8161](https://github.com/vitejs/vite/issues/8161)
diff --git a/packages/plugin-vue-jsx/package.json b/packages/plugin-vue-jsx/package.json
index 309abf9e6745de..8764b168fb8069 100644
--- a/packages/plugin-vue-jsx/package.json
+++ b/packages/plugin-vue-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue-jsx",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "license": "MIT",
   "author": "Evan You",
   "files": [
diff --git a/packages/plugin-vue-jsx/src/index.ts b/packages/plugin-vue-jsx/src/index.ts
index e23f0031b69bd1..c96fe2964e83b0 100644
--- a/packages/plugin-vue-jsx/src/index.ts
+++ b/packages/plugin-vue-jsx/src/index.ts
@@ -73,7 +73,7 @@ function vueJsxPlugin(options: Options = {}): Plugin {
       }
     },
 
-    transform(code, id, opt) {
+    async transform(code, id, opt) {
       const ssr = typeof opt === 'boolean' ? opt : (opt && opt.ssr) === true
       const {
         include,
@@ -91,7 +91,10 @@ function vueJsxPlugin(options: Options = {}): Plugin {
         const plugins = [importMeta, [jsx, babelPluginOptions], ...babelPlugins]
         if (id.endsWith('.tsx') || filepath.endsWith('.tsx')) {
           plugins.push([
-            require('@babel/plugin-transform-typescript'),
+            // @ts-ignore missing type
+            await import('@babel/plugin-transform-typescript').then(
+              (r) => r.default
+            ),
             // @ts-ignore
             { isTSX: true, allowExtensions: true }
           ])
diff --git a/packages/plugin-vue-jsx/tsconfig.json b/packages/plugin-vue-jsx/tsconfig.json
index c20adf0da4b86f..ddb60f864b7e6d 100644
--- a/packages/plugin-vue-jsx/tsconfig.json
+++ b/packages/plugin-vue-jsx/tsconfig.json
@@ -3,8 +3,8 @@
   "exclude": ["**/*.spec.ts"],
   "compilerOptions": {
     "outDir": "dist",
-    "target": "ES2018",
-    "module": "CommonJS",
+    "target": "ES2020",
+    "module": "ES2020",
     "moduleResolution": "Node",
     "strict": true,
     "declaration": true,
diff --git a/packages/plugin-vue/CHANGELOG.md b/packages/plugin-vue/CHANGELOG.md
index e9ecc698fef094..8c17f381fc24ca 100644
--- a/packages/plugin-vue/CHANGELOG.md
+++ b/packages/plugin-vue/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 3.0.0-alpha.1 (2022-05-19)
+
+* fix: rewrite CJS specific funcs/vars in plugins (#8227) ([9baa70b](https://github.com/vitejs/vite/commit/9baa70b)), closes [#8227](https://github.com/vitejs/vite/issues/8227)
+* fix(plugin-vue): regenerate scoped css in build watch, fix #7980 (#7989) ([dc00225](https://github.com/vitejs/vite/commit/dc00225)), closes [#7980](https://github.com/vitejs/vite/issues/7980) [#7989](https://github.com/vitejs/vite/issues/7989)
+* fix(plugin-vue): use server.origin when building base for transformAssetUrls (#8077) ([2f7a490](https://github.com/vitejs/vite/commit/2f7a490)), closes [#8077](https://github.com/vitejs/vite/issues/8077)
+* build!: bump targets (#8045) ([66efd69](https://github.com/vitejs/vite/commit/66efd69)), closes [#8045](https://github.com/vitejs/vite/issues/8045)
+* chore: enable `import/no-duplicates` eslint rule (#8199) ([11243de](https://github.com/vitejs/vite/commit/11243de)), closes [#8199](https://github.com/vitejs/vite/issues/8199)
+* docs(plugin-vue): clarify asset url handling (#8184) ([32c75e2](https://github.com/vitejs/vite/commit/32c75e2)), closes [#8184](https://github.com/vitejs/vite/issues/8184)
+
+
+
 ## 3.0.0-alpha.0 (2022-05-13)
 
 * chore: bump minors and rebuild lock (#8074) ([aeb5b74](https://github.com/vitejs/vite/commit/aeb5b74)), closes [#8074](https://github.com/vitejs/vite/issues/8074)
diff --git a/packages/plugin-vue/README.md b/packages/plugin-vue/README.md
index a232982e8aed59..ae848051cecd10 100644
--- a/packages/plugin-vue/README.md
+++ b/packages/plugin-vue/README.md
@@ -51,6 +51,40 @@ export interface Options {
 }
 ```
 
+## Asset URL handling
+
+When `@vitejs/plugin-vue` compiles the `<template>` blocks in SFCs, it also converts any encountered asset URLs into ESM imports.
+
+For example, the following template snippet:
+
+```vue
+<img src="../image.png" />
+```
+
+Is the same as:
+
+```vue
+<script setup>
+import _imports_0 from '../image.png'
+</script>
+
+<img src="_imports_0" />
+```
+
+By default the following tag/attribute combinations are transformed, and can be configured using the `template.transformAssetUrls` option.
+
+```js
+{
+  video: ['src', 'poster'],
+  source: ['src'],
+  img: ['src'],
+  image: ['xlink:href', 'href'],
+  use: ['xlink:href', 'href']
+}
+```
+
+Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. `import imgUrl from '../image.png'`.
+
 ## Example for passing options to `vue/compiler-sfc`:
 
 ```ts
@@ -64,14 +98,7 @@ export default {
           // ...
         },
         transformAssetUrls: {
-          // default tags
-          tags: {
-            video: ['src', 'poster'],
-            source: ['src'],
-            img: ['src'],
-            image: ['xlink:href', 'href'],
-            use: ['xlink:href', 'href']
-          }
+          // ...
         }
       }
     })
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
index c0a104de324cbf..04f3f998b9ecf4 100644
--- a/packages/plugin-vue/package.json
+++ b/packages/plugin-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "license": "MIT",
   "author": "Evan You",
   "files": [
diff --git a/packages/plugin-vue/src/compiler.ts b/packages/plugin-vue/src/compiler.ts
index 9c70f6a8a64590..f4a24b1ea95005 100644
--- a/packages/plugin-vue/src/compiler.ts
+++ b/packages/plugin-vue/src/compiler.ts
@@ -5,6 +5,7 @@ declare module 'vue/compiler-sfc' {
   }
 }
 
+import { createRequire } from 'module'
 import type * as _compiler from 'vue/compiler-sfc'
 
 export function resolveCompiler(root: string): typeof _compiler {
@@ -23,8 +24,11 @@ export function resolveCompiler(root: string): typeof _compiler {
   return compiler
 }
 
+const _require = createRequire(import.meta.url)
 function tryRequire(id: string, from?: string) {
   try {
-    return from ? require(require.resolve(id, { paths: [from] })) : require(id)
+    return from
+      ? _require(_require.resolve(id, { paths: [from] }))
+      : _require(id)
   } catch (e) {}
 }
diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index 6526f941319849..805df6fec674d0 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -1,6 +1,7 @@
 import fs from 'fs'
 import type { Plugin, ViteDevServer } from 'vite'
 import { createFilter } from '@rollup/pluginutils'
+/* eslint-disable import/no-duplicates */
 import type {
   SFCBlock,
   SFCScriptCompileOptions,
@@ -8,6 +9,7 @@ import type {
   SFCTemplateCompileOptions
 } from 'vue/compiler-sfc'
 import type * as _compiler from 'vue/compiler-sfc'
+/* eslint-enable import/no-duplicates */
 import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
 import { getDescriptor, getSrcDescriptor } from './utils/descriptorCache'
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index 8215ff7ba346a7..be11de7e33a23a 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -269,7 +269,7 @@ async function genTemplateCode(
         ? `&src=${descriptor.id}`
         : '&src=true'
       : ''
-    const scopedQuery = hasScoped ? `&scoped=true` : ``
+    const scopedQuery = hasScoped ? `&scoped=${descriptor.id}` : ``
     const attrsQuery = attrsToQuery(template.attrs, 'js', true)
     const query = `?vue&type=template${srcQuery}${scopedQuery}${attrsQuery}`
     const request = JSON.stringify(src + query)
@@ -356,7 +356,8 @@ async function genStyleCode(
           : '&src=true'
         : ''
       const directQuery = asCustomElement ? `&inline` : ``
-      const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}`
+      const scopedQuery = style.scoped ? `&scoped=${descriptor.id}` : ``
+      const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}${scopedQuery}`
       const styleRequest = src + query + attrsQuery
       if (style.module) {
         if (asCustomElement) {
@@ -457,7 +458,7 @@ async function linkSrcToDescriptor(
 
 // these are built-in query parameters so should be ignored
 // if the user happen to add them as attrs
-const ignoreList = ['id', 'index', 'src', 'type', 'lang', 'module']
+const ignoreList = ['id', 'index', 'src', 'type', 'lang', 'module', 'scoped']
 
 function attrsToQuery(
   attrs: SFCBlock['attrs'],
diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
index 5ff2fb399829f2..107dfc2d163495 100644
--- a/packages/plugin-vue/src/template.ts
+++ b/packages/plugin-vue/src/template.ts
@@ -119,6 +119,7 @@ export function resolveTemplateCompilerOptions(
     if (filename.startsWith(options.root)) {
       assetUrlOptions = {
         base:
+          (options.devServer.config.server?.origin ?? '') +
           options.devServer.config.base +
           slash(path.relative(options.root, path.dirname(filename)))
       }
diff --git a/packages/plugin-vue/tsconfig.json b/packages/plugin-vue/tsconfig.json
index 6165780e190e25..d3a45a1b69dbd3 100644
--- a/packages/plugin-vue/tsconfig.json
+++ b/packages/plugin-vue/tsconfig.json
@@ -3,8 +3,8 @@
   "exclude": ["**/*.spec.ts"],
   "compilerOptions": {
     "outDir": "dist",
-    "target": "ES2019",
-    "module": "commonjs",
+    "target": "ES2020",
+    "module": "ES2020",
     "moduleResolution": "node",
     "strict": true,
     "declaration": true,
diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index 318f05aa982401..36471ddeeab3df 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 3.0.0-alpha.1 (2022-05-18)
+
+* feat!: relative base (#7644) ([09648c2](https://github.com/vitejs/vite/commit/09648c2)), closes [#7644](https://github.com/vitejs/vite/issues/7644)
+* chore: enable `import/no-duplicates` eslint rule (#8199) ([11243de](https://github.com/vitejs/vite/commit/11243de)), closes [#8199](https://github.com/vitejs/vite/issues/8199)
+* feat(css): warn if url rewrite has no importer (#8183) ([0858450](https://github.com/vitejs/vite/commit/0858450)), closes [#8183](https://github.com/vitejs/vite/issues/8183)
+* fix(glob): properly handles tailing comma (#8181) ([462be8e](https://github.com/vitejs/vite/commit/462be8e)), closes [#8181](https://github.com/vitejs/vite/issues/8181)
+
+
+
 ## 3.0.0-alpha.0 (2022-05-13)
 
 * feat: allow any JS identifier in define, not ASCII-only (#5972) ([95eb45b](https://github.com/vitejs/vite/commit/95eb45b)), closes [#5972](https://github.com/vitejs/vite/issues/5972)
@@ -7,20 +16,15 @@
 * feat: treat Astro file scripts as TS (#8151) ([559c952](https://github.com/vitejs/vite/commit/559c952)), closes [#8151](https://github.com/vitejs/vite/issues/8151)
 * feat: worker emit fileName with config (#7804) ([04c2edd](https://github.com/vitejs/vite/commit/04c2edd)), closes [#7804](https://github.com/vitejs/vite/issues/7804)
 * feat(glob-import): support `{ import: '*' }` (#8071) ([0b78b2a](https://github.com/vitejs/vite/commit/0b78b2a)), closes [#8071](https://github.com/vitejs/vite/issues/8071)
-* fix: add direct query to html-proxy css (fixes #8091) (#8094) ([54a941a](https://github.com/vitejs/vite/commit/54a941a)), closes [#8091](https://github.com/vitejs/vite/issues/8091) [#8094](https://github.com/vitejs/vite/issues/8094)
 * fix: add hash to lib chunk names (#7190) ([c81cedf](https://github.com/vitejs/vite/commit/c81cedf)), closes [#7190](https://github.com/vitejs/vite/issues/7190)
 * fix: allow css to be written for systemjs output (#5902) ([780b4f5](https://github.com/vitejs/vite/commit/780b4f5)), closes [#5902](https://github.com/vitejs/vite/issues/5902)
 * fix: client full reload (#8018) ([2f478ed](https://github.com/vitejs/vite/commit/2f478ed)), closes [#8018](https://github.com/vitejs/vite/issues/8018)
-* fix: graceful rename in windows (#8036) ([fe704f1](https://github.com/vitejs/vite/commit/fe704f1)), closes [#8036](https://github.com/vitejs/vite/issues/8036)
 * fix: handle optimize failure (#8006) ([ba95a2a](https://github.com/vitejs/vite/commit/ba95a2a)), closes [#8006](https://github.com/vitejs/vite/issues/8006)
-* fix: image-set with base64 images (fix #8028) (#8035) ([e10c0c1](https://github.com/vitejs/vite/commit/e10c0c1)), closes [#8028](https://github.com/vitejs/vite/issues/8028) [#8035](https://github.com/vitejs/vite/issues/8035)
 * fix: increase default HTTPS dev server session memory limit (#6207) ([f895f94](https://github.com/vitejs/vite/commit/f895f94)), closes [#6207](https://github.com/vitejs/vite/issues/6207)
-* fix: invalidate ssrError when HMR update occurs (#8052) ([c7356e0](https://github.com/vitejs/vite/commit/c7356e0)), closes [#8052](https://github.com/vitejs/vite/issues/8052)
 * fix: relative path html (#8122) ([d0deac0](https://github.com/vitejs/vite/commit/d0deac0)), closes [#8122](https://github.com/vitejs/vite/issues/8122)
 * fix: Remove ssrError when invalidating a module (#8124) ([a543220](https://github.com/vitejs/vite/commit/a543220)), closes [#8124](https://github.com/vitejs/vite/issues/8124)
 * fix: remove useless `/__vite_ping` handler (#8133) ([d607b2b](https://github.com/vitejs/vite/commit/d607b2b)), closes [#8133](https://github.com/vitejs/vite/issues/8133)
 * fix: typo in #8121 (#8143) ([c32e3ac](https://github.com/vitejs/vite/commit/c32e3ac)), closes [#8121](https://github.com/vitejs/vite/issues/8121) [#8143](https://github.com/vitejs/vite/issues/8143)
-* fix: use `strip-literal` to strip string lterals (#8054) ([1ffc010](https://github.com/vitejs/vite/commit/1ffc010)), closes [#8054](https://github.com/vitejs/vite/issues/8054)
 * fix: use Vitest for unit testing, clean regex bug (#8040) ([63cd53d](https://github.com/vitejs/vite/commit/63cd53d)), closes [#8040](https://github.com/vitejs/vite/issues/8040)
 * fix: Vite cannot load configuration files in the link directory (#4180) (#4181) ([a3fa1a3](https://github.com/vitejs/vite/commit/a3fa1a3)), closes [#4180](https://github.com/vitejs/vite/issues/4180) [#4181](https://github.com/vitejs/vite/issues/4181)
 * fix: vite client types (#7877) ([0e67fe8](https://github.com/vitejs/vite/commit/0e67fe8)), closes [#7877](https://github.com/vitejs/vite/issues/7877)
@@ -55,11 +59,21 @@
 * refactor: remove deprecated api for 3.0 (#5868) ([b5c3709](https://github.com/vitejs/vite/commit/b5c3709)), closes [#5868](https://github.com/vitejs/vite/issues/5868)
 * refactor: use `import.meta.glob` over `globEager` in tests (#8066) ([1878f46](https://github.com/vitejs/vite/commit/1878f46)), closes [#8066](https://github.com/vitejs/vite/issues/8066)
 * refactor: use node hash (#7975) ([5ce7c74](https://github.com/vitejs/vite/commit/5ce7c74)), closes [#7975](https://github.com/vitejs/vite/issues/7975)
-* perf(lib): reduce backtrack when injecting esbuild helpers (#8110) ([b993c5f](https://github.com/vitejs/vite/commit/b993c5f)), closes [#8110](https://github.com/vitejs/vite/issues/8110)
 * test: migrate to vitest (#8076) ([8148f67](https://github.com/vitejs/vite/commit/8148f67)), closes [#8076](https://github.com/vitejs/vite/issues/8076)
 
 
 
+## <small>2.9.9 (2022-05-11)</small>
+
+* fix: add direct query to html-proxy css (fixes #8091) (#8094) ([a24b5e3](https://github.com/vitejs/vite/commit/a24b5e3)), closes [#8091](https://github.com/vitejs/vite/issues/8091) [#8094](https://github.com/vitejs/vite/issues/8094)
+* fix: graceful rename in windows (#8036) ([84496f8](https://github.com/vitejs/vite/commit/84496f8)), closes [#8036](https://github.com/vitejs/vite/issues/8036)
+* fix: image-set with base64 images (fix #8028) (#8035) ([992aee2](https://github.com/vitejs/vite/commit/992aee2)), closes [#8028](https://github.com/vitejs/vite/issues/8028) [#8035](https://github.com/vitejs/vite/issues/8035)
+* fix: invalidate ssrError when HMR update occurs (#8052) ([22fa882](https://github.com/vitejs/vite/commit/22fa882)), closes [#8052](https://github.com/vitejs/vite/issues/8052)
+* fix: use `strip-literal` to strip string lterals (#8054) ([b6fc3cd](https://github.com/vitejs/vite/commit/b6fc3cd)), closes [#8054](https://github.com/vitejs/vite/issues/8054)
+* perf(lib): reduce backtrack when injecting esbuild helpers (#8110) ([e5556ab](https://github.com/vitejs/vite/commit/e5556ab)), closes [#8110](https://github.com/vitejs/vite/issues/8110)
+
+
+
 ## <small>2.9.8 (2022-05-04)</small>
 
 * fix: inline js and css paths for virtual html (#7993) ([d49e3fb](https://github.com/vitejs/vite/commit/d49e3fb)), closes [#7993](https://github.com/vitejs/vite/issues/7993)
diff --git a/packages/vite/client.d.ts b/packages/vite/client.d.ts
index af8e6a6f9d1494..948d66d1d7ad74 100644
--- a/packages/vite/client.d.ts
+++ b/packages/vite/client.d.ts
@@ -152,8 +152,10 @@ declare module '*.otf' {
 }
 
 // other
-declare module '*.wasm' {
-  const initWasm: (options: WebAssembly.Imports) => Promise<WebAssembly.Exports>
+declare module '*.wasm?init' {
+  const initWasm: (
+    options: WebAssembly.Imports
+  ) => Promise<WebAssembly.Instance>
   export default initWasm
 }
 declare module '*.webmanifest' {
diff --git a/packages/vite/package.json b/packages/vite/package.json
index c5cdc5e4525498..a6262470645e76 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",
diff --git a/packages/vite/rollup.config.js b/packages/vite/rollup.config.js
index 93f4f33bdec398..450217f91d8a80 100644
--- a/packages/vite/rollup.config.js
+++ b/packages/vite/rollup.config.js
@@ -19,7 +19,7 @@ const envConfig = {
   input: path.resolve(__dirname, 'src/client/env.ts'),
   plugins: [
     typescript({
-      target: 'es2018',
+      target: 'es2020',
       include: ['src/client/env.ts'],
       baseUrl: path.resolve(__dirname, 'src/env'),
       paths: {
@@ -41,7 +41,7 @@ const clientConfig = {
   external: ['./env', '@vite/env'],
   plugins: [
     typescript({
-      target: 'es2018',
+      target: 'es2020',
       include: ['src/client/**/*.ts'],
       baseUrl: path.resolve(__dirname, 'src/client'),
       paths: {
@@ -128,7 +128,7 @@ const createNodeConfig = (isProduction) => {
       typescript({
         tsconfig: 'src/node/tsconfig.json',
         module: 'esnext',
-        target: 'es2019',
+        target: 'es2020',
         include: ['src/**/*.ts', 'types/**'],
         exclude: ['src/**/__tests__/**'],
         esModuleInterop: true,
diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 6a7f9b27c3a700..5aec1eae9c5bc0 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -13,16 +13,35 @@ declare const __HMR_PORT__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
-console.log('[vite] connecting...')
+console.debug('[vite] connecting...')
 
 // use server configuration, then fallback to inference
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
 const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
-const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
 const base = __BASE__ || '/'
 const messageBuffer: string[] = []
 
+let socket: WebSocket
+try {
+  socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
+
+  // Listen for messages
+  socket.addEventListener('message', async ({ data }) => {
+    handleMessage(JSON.parse(data))
+  })
+
+  // ping server
+  socket.addEventListener('close', async ({ wasClean }) => {
+    if (wasClean) return
+    console.log(`[vite] server connection lost. polling for restart...`)
+    await waitForSuccessfulPing()
+    location.reload()
+  })
+} catch (error) {
+  console.error(`[vite] failed to connect to websocket (${error}). `)
+}
+
 function warnFailedFetch(err: Error, path: string | string[]) {
   if (!err.message.match('fetch')) {
     console.error(err)
@@ -40,17 +59,12 @@ function cleanUrl(pathname: string): string {
   return url.pathname + url.search
 }
 
-// Listen for messages
-socket.addEventListener('message', async ({ data }) => {
-  handleMessage(JSON.parse(data))
-})
-
 let isFirstUpdate = true
 
 async function handleMessage(payload: HMRPayload) {
   switch (payload.type) {
     case 'connected':
-      console.log(`[vite] connected.`)
+      console.debug(`[vite] connected.`)
       sendMessageBuffer()
       // proxy(nginx, docker) hmr ws maybe caused timeout,
       // so send ping package let ws keep alive.
@@ -212,14 +226,6 @@ async function waitForSuccessfulPing(ms = 1000) {
   }
 }
 
-// ping server
-socket.addEventListener('close', async ({ wasClean }) => {
-  if (wasClean) return
-  console.log(`[vite] server connection lost. polling for restart...`)
-  await waitForSuccessfulPing()
-  location.reload()
-})
-
 // https://wicg.github.io/construct-stylesheets
 const supportsConstructedSheet = (() => {
   // TODO: re-enable this try block once Chrome fixes the performance of
diff --git a/packages/vite/src/client/tsconfig.json b/packages/vite/src/client/tsconfig.json
index 1fd43f8327decc..c6421264c50409 100644
--- a/packages/vite/src/client/tsconfig.json
+++ b/packages/vite/src/client/tsconfig.json
@@ -3,7 +3,7 @@
   "include": ["./", "../../types"],
   "compilerOptions": {
     "outDir": "../../dist/client",
-    "module": "esnext",
+    "module": "ESNext",
     "types": [],
     "lib": ["ESNext", "DOM"],
     "declaration": false
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts b/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts
index df1e0d758e8849..aaa03ebef8f8ef 100644
--- a/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts
@@ -8,7 +8,11 @@ async function run(input: string) {
     process.cwd(),
     (id) => id
   )
-  return items.map((i) => ({ globs: i.globs, options: i.options }))
+  return items.map((i) => ({
+    globs: i.globs,
+    options: i.options,
+    start: i.start
+  }))
 }
 
 async function runError(input: string) {
@@ -23,23 +27,44 @@ describe('parse positives', async () => {
   it('basic', async () => {
     expect(
       await run(`
-    import.meta.importGlob(\'./modules/*.ts\')
+    import.meta.glob(\'./modules/*.ts\')
+    `)
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "./modules/*.ts",
+          ],
+          "options": {},
+          "start": 5,
+        },
+      ]
     `)
-    ).toMatchInlineSnapshot('[]')
   })
 
   it('array', async () => {
     expect(
       await run(`
-    import.meta.importGlob([\'./modules/*.ts\', './dir/*.{js,ts}\'])
+    import.meta.glob([\'./modules/*.ts\', './dir/*.{js,ts}\'])
+    `)
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "./modules/*.ts",
+            "./dir/*.{js,ts}",
+          ],
+          "options": {},
+          "start": 5,
+        },
+      ]
     `)
-    ).toMatchInlineSnapshot('[]')
   })
 
   it('options with multilines', async () => {
     expect(
       await run(`
-    import.meta.importGlob([
+    import.meta.glob([
       \'./modules/*.ts\',
       "!./dir/*.{js,ts}"
     ], {
@@ -47,7 +72,21 @@ describe('parse positives', async () => {
       import: 'named'
     })
     `)
-    ).toMatchInlineSnapshot('[]')
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "./modules/*.ts",
+            "!./dir/*.{js,ts}",
+          ],
+          "options": {
+            "eager": true,
+            "import": "named",
+          },
+          "start": 5,
+        },
+      ]
+    `)
   })
 
   it('options with multilines', async () => {
@@ -68,6 +107,7 @@ describe('parse positives', async () => {
             "/dir/**",
           ],
           "options": {},
+          "start": 21,
         },
       ]
     `)
@@ -98,6 +138,99 @@ describe('parse positives', async () => {
               "raw": true,
             },
           },
+          "start": 21,
+        },
+      ]
+    `)
+  })
+
+  it('object properties - 1', async () => {
+    expect(
+      await run(`
+    export const pageFiles = {
+      '.page': import.meta.glob('/**/*.page.*([a-zA-Z0-9])')
+};`)
+    ).toMatchInlineSnapshot(`
+  [
+    {
+      "globs": [
+        "/**/*.page.*([a-zA-Z0-9])",
+      ],
+      "options": {},
+      "start": 47,
+    },
+  ]
+`)
+  })
+
+  it('object properties - 2', async () => {
+    expect(
+      await run(`
+    export const pageFiles = {
+      '.page': import.meta.glob('/**/*.page.*([a-zA-Z0-9])'),
+};`)
+    ).toMatchInlineSnapshot(`
+  [
+    {
+      "globs": [
+        "/**/*.page.*([a-zA-Z0-9])",
+      ],
+      "options": {},
+      "start": 47,
+    },
+  ]
+`)
+  })
+
+  it('object properties - 3', async () => {
+    expect(
+      await run(`
+    export const pageFiles = {
+      '.page.client': import.meta.glob('/**/*.page.client.*([a-zA-Z0-9])'),
+      '.page.server': import.meta.glob('/**/*.page.server.*([a-zA-Z0-9])'),
+};`)
+    ).toMatchInlineSnapshot(`
+  [
+    {
+      "globs": [
+        "/**/*.page.client.*([a-zA-Z0-9])",
+      ],
+      "options": {},
+      "start": 54,
+    },
+    {
+      "globs": [
+        "/**/*.page.server.*([a-zA-Z0-9])",
+      ],
+      "options": {},
+      "start": 130,
+    },
+  ]
+`)
+  })
+
+  it('array item', async () => {
+    expect(
+      await run(`
+    export const pageFiles = [
+      import.meta.glob('/**/*.page.client.*([a-zA-Z0-9])'),
+      import.meta.glob('/**/*.page.server.*([a-zA-Z0-9])'),
+    ]`)
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "/**/*.page.client.*([a-zA-Z0-9])",
+          ],
+          "options": {},
+          "start": 38,
+        },
+        {
+          "globs": [
+            "/**/*.page.server.*([a-zA-Z0-9])",
+          ],
+          "options": {},
+          "start": 98,
         },
       ]
     `)
@@ -106,97 +239,117 @@ describe('parse positives', async () => {
 
 describe('parse negatives', async () => {
   it('syntax error', async () => {
-    expect(await runError('import.meta.importGlob(')).toMatchInlineSnapshot(
-      'undefined'
+    expect(await runError('import.meta.glob(')).toMatchInlineSnapshot(
+      '[SyntaxError: Unexpected token (1:17)]'
     )
   })
 
   it('empty', async () => {
-    expect(await runError('import.meta.importGlob()')).toMatchInlineSnapshot(
-      'undefined'
+    expect(await runError('import.meta.glob()')).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected 1-2 arguments, but got 0]'
     )
   })
 
   it('3 args', async () => {
     expect(
-      await runError('import.meta.importGlob("", {}, {})')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("", {}, {})')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected 1-2 arguments, but got 3]'
+    )
   })
 
   it('in string', async () => {
-    expect(await runError('"import.meta.importGlob()"')).toBeUndefined()
+    expect(await runError('"import.meta.glob()"')).toBeUndefined()
   })
 
   it('variable', async () => {
-    expect(await runError('import.meta.importGlob(hey)')).toMatchInlineSnapshot(
-      'undefined'
+    expect(await runError('import.meta.glob(hey)')).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
     )
   })
 
   it('template', async () => {
     // eslint-disable-next-line no-template-curly-in-string
     expect(
-      await runError('import.meta.importGlob(`hi ${hey}`)')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob(`hi ${hey}`)')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
   })
 
   it('be string', async () => {
-    expect(await runError('import.meta.importGlob(1)')).toMatchInlineSnapshot(
-      'undefined'
+    expect(await runError('import.meta.glob(1)')).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected glob to be a string, but got "number"]'
     )
   })
 
   it('be array variable', async () => {
+    expect(await runError('import.meta.glob([hey])')).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
     expect(
-      await runError('import.meta.importGlob([hey])')
-    ).toMatchInlineSnapshot('undefined')
-    expect(
-      await runError('import.meta.importGlob(["1", hey])')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob(["1", hey])')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
   })
 
   it('options', async () => {
     expect(
-      await runError('import.meta.importGlob("hey", hey)')
-    ).toMatchInlineSnapshot('undefined')
-    expect(
-      await runError('import.meta.importGlob("hey", [])')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("hey", hey)')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected the second argument o to be a object literal, but got "Identifier"]'
+    )
+    expect(await runError('import.meta.glob("hey", [])')).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected the second argument o to be a object literal, but got "ArrayExpression"]'
+    )
   })
 
   it('options props', async () => {
     expect(
-      await runError('import.meta.importGlob("hey", { hey: 1 })')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("hey", { hey: 1 })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Unknown options hey]'
+    )
     expect(
-      await runError('import.meta.importGlob("hey", { import: hey })')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("hey", { import: hey })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
     expect(
-      await runError('import.meta.importGlob("hey", { eager: 123 })')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("hey", { eager: 123 })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected the type of option "eager" to be "boolean", but got "number"]'
+    )
   })
 
   it('options query', async () => {
     expect(
-      await runError(
-        'import.meta.importGlob("./*.js", { as: "raw", query: "hi" })'
-      )
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("./*.js", { as: "raw", query: "hi" })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Options "as" and "query" cannot be used together]'
+    )
     expect(
-      await runError('import.meta.importGlob("./*.js", { query: 123 })')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("./*.js", { query: 123 })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Expected query to be a string, but got "number"]'
+    )
     expect(
-      await runError('import.meta.importGlob("./*.js", { query: { foo: {} } })')
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("./*.js", { query: { foo: {} } })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
     expect(
-      await runError(
-        'import.meta.importGlob("./*.js", { query: { foo: hey } })'
-      )
-    ).toMatchInlineSnapshot('undefined')
+      await runError('import.meta.glob("./*.js", { query: { foo: hey } })')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
     expect(
       await runError(
-        'import.meta.importGlob("./*.js", { query: { foo: 123, ...a } })'
+        'import.meta.glob("./*.js", { query: { foo: 123, ...a } })'
       )
-    ).toMatchInlineSnapshot('undefined')
+    ).toMatchInlineSnapshot(
+      '[Error: Invalid glob import syntax: Could only use literals]'
+    )
   })
 })
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index ea40914fdb44c8..cdfc1540bda5cc 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -245,15 +245,15 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     // Support browserslist
     // "defaults and supports es6-module and supports es6-module-dynamic-import",
     resolved.target = [
-      'es2019',
+      'es2020', // support import.meta.url
       'edge88',
       'firefox78',
       'chrome87',
-      'safari13.1'
+      'safari13' // transpile nullish coalescing
     ]
   } else if (resolved.target === 'esnext' && resolved.minify === 'terser') {
-    // esnext + terser: limit to es2019 so it can be minified by terser
-    resolved.target = 'es2019'
+    // esnext + terser: limit to es2021 so it can be minified by terser
+    resolved.target = 'es2021'
   }
 
   if (!resolved.cssTarget) {
diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts
index 9612cd8c96460d..8f673c72f30fba 100644
--- a/packages/vite/src/node/constants.ts
+++ b/packages/vite/src/node/constants.ts
@@ -81,7 +81,6 @@ export const KNOWN_ASSET_TYPES = [
   'otf',
 
   // other
-  'wasm',
   'webmanifest',
   'pdf',
   'txt'
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index ef5255ba8ee098..4c1bcfea0fd50b 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -6,9 +6,8 @@ import type { OutputOptions, PluginContext } from 'rollup'
 import MagicString from 'magic-string'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
-import { cleanUrl } from '../utils'
+import { cleanUrl, getHash, isRelativeBase, normalizePath } from '../utils'
 import { FS_PREFIX } from '../constants'
-import { getHash, normalizePath } from '../utils'
 
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
 
@@ -30,6 +29,7 @@ const emittedHashMap = new WeakMap<ResolvedConfig, Set<string>>()
 export function assetPlugin(config: ResolvedConfig): Plugin {
   // assetHashToFilenameMap initialization in buildStart causes getAssetFilename to return undefined
   assetHashToFilenameMap.set(config, new Map())
+  const relativeBase = isRelativeBase(config.base)
 
   // add own dictionary entry by directly assigning mrmine
   // https://github.com/lukeed/mrmime/issues/3
@@ -83,8 +83,13 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let match: RegExpExecArray | null
       let s: MagicString | undefined
 
+      const absoluteUrlPathInterpolation = (filename: string) =>
+        `"+new URL(${JSON.stringify(
+          path.posix.relative(path.dirname(chunk.fileName), filename)
+        )},import.meta.url).href+"`
+
       // Urls added with JS using e.g.
-      // imgElement.src = "my/file.png" are using quotes
+      // imgElement.src = "__VITE_ASSET__5aa0ddc0__" are using quotes
 
       // Urls added in CSS that is imported in JS end up like
       // var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n";
@@ -95,15 +100,33 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         s = s || (s = new MagicString(code))
         const [full, hash, postfix = ''] = match
         // some internal plugins may still need to emit chunks (e.g. worker) so
-        // fallback to this.getFileName for that.
+        // fallback to this.getFileName for that. TODO: remove, not needed
         const file = getAssetFilename(hash, config) || this.getFileName(hash)
         chunk.viteMetadata.importedAssets.add(cleanUrl(file))
-        const outputFilepath = config.base + file + postfix
+        const filename = file + postfix
+        const outputFilepath = relativeBase
+          ? absoluteUrlPathInterpolation(filename)
+          : JSON.stringify(config.base + filename).slice(1, -1)
         s.overwrite(match.index, match.index + full.length, outputFilepath, {
           contentOnly: true
         })
       }
 
+      // Replace __VITE_PUBLIC_ASSET__5aa0ddc0__ with absolute paths
+
+      if (relativeBase) {
+        const publicAssetUrlMap = publicAssetUrlCache.get(config)!
+        while ((match = publicAssetUrlRE.exec(code))) {
+          s = s || (s = new MagicString(code))
+          const [full, hash] = match
+          const publicUrl = publicAssetUrlMap.get(hash)!
+          const replacement = absoluteUrlPathInterpolation(publicUrl.slice(1))
+          s.overwrite(match.index, match.index + full.length, replacement, {
+            contentOnly: true
+          })
+        }
+      }
+
       if (s) {
         return {
           code: s.toString(),
@@ -259,6 +282,33 @@ export function assetFileNamesToFileName(
   return fileName
 }
 
+export const publicAssetUrlCache = new WeakMap<
+  ResolvedConfig,
+  // hash -> url
+  Map<string, string>
+>()
+
+export const publicAssetUrlRE = /__VITE_PUBLIC_ASSET__([a-z\d]{8})__/g
+
+export function publicFileToBuiltUrl(
+  url: string,
+  config: ResolvedConfig
+): string {
+  if (!isRelativeBase(config.base)) {
+    return config.base + url.slice(1)
+  }
+  const hash = getHash(url)
+  let cache = publicAssetUrlCache.get(config)
+  if (!cache) {
+    cache = new Map<string, string>()
+    publicAssetUrlCache.set(config, cache)
+  }
+  if (!cache.get(hash)) {
+    cache.set(hash, url)
+  }
+  return `__VITE_PUBLIC_ASSET__${hash}__`
+}
+
 /**
  * Register an asset to be emitted as part of the bundle (if necessary)
  * and returns the resolved public URL
@@ -270,7 +320,7 @@ async function fileToBuiltUrl(
   skipPublicCheck = false
 ): Promise<string> {
   if (!skipPublicCheck && checkPublicFile(id, config)) {
-    return config.base + id.slice(1)
+    return publicFileToBuiltUrl(id, config)
   }
 
   const cache = assetCache.get(config)!
@@ -343,7 +393,7 @@ export async function urlToBuiltUrl(
   pluginContext: PluginContext
 ): Promise<string> {
   if (checkPublicFile(url, config)) {
-    return config.base + url.slice(1)
+    return publicFileToBuiltUrl(url, config)
   }
   const file = url.startsWith('/')
     ? path.join(config.root, url)
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 2bff4f5e7b682e..636234736cc32c 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -4,6 +4,7 @@ import { stripLiteral } from 'strip-literal'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { fileToUrl } from './asset'
+import { preloadHelperId } from './importAnalysisBuild'
 
 /**
  * Convert `new URL('./foo.png', import.meta.url)` to its resolved built URL
@@ -21,6 +22,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
     async transform(code, id, options) {
       if (
         !options?.ssr &&
+        id !== preloadHelperId &&
         code.includes('new URL') &&
         code.includes(`import.meta.url`)
       ) {
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1f58de158fdea3..eeafc46feafee0 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -32,22 +32,27 @@ import {
   asyncReplace,
   cleanUrl,
   combineSourcemaps,
+  emptyCssComments,
   generateCodeFrame,
   getHash,
   isDataUrl,
   isExternalUrl,
   isObject,
+  isRelativeBase,
   normalizePath,
   parseRequest,
   processSrcSet
 } from '../utils'
-import { emptyCssComments } from '../utils'
+import type { Logger } from '../logger'
 import { addToHTMLProxyTransformResult } from './html'
 import {
   assetUrlRE,
   checkPublicFile,
   fileToUrl,
-  getAssetFilename
+  getAssetFilename,
+  publicAssetUrlCache,
+  publicAssetUrlRE,
+  publicFileToBuiltUrl
 } from './asset'
 
 // const debug = createDebugger('vite:css')
@@ -105,6 +110,8 @@ const inlineCSSRE = /(\?|&)inline-css\b/
 const usedRE = /(\?|&)used\b/
 const varRE = /^var\(/i
 
+const cssBundleName = 'style.css'
+
 const enum PreprocessLang {
   less = 'less',
   sass = 'sass',
@@ -182,7 +189,11 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
 
       const urlReplacer: CssUrlReplacer = async (url, importer) => {
         if (checkPublicFile(url, config)) {
-          return config.base + url.slice(1)
+          if (isRelativeBase(config.base)) {
+            return publicFileToBuiltUrl(url, config)
+          } else {
+            return config.base + url.slice(1)
+          }
         }
         const resolved = await resolveUrl(url, importer)
         if (resolved) {
@@ -282,6 +293,30 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   let outputToExtractedCSSMap: Map<NormalizedOutputOptions, string>
   let hasEmitted = false
 
+  const relativeBase = isRelativeBase(config.base)
+
+  const rollupOptionsOutput = config.build.rollupOptions.output
+  const assetFileNames = (
+    Array.isArray(rollupOptionsOutput)
+      ? rollupOptionsOutput[0]
+      : rollupOptionsOutput
+  )?.assetFileNames
+  const getCssAssetDirname = (cssAssetName: string) => {
+    if (!assetFileNames) {
+      return config.build.assetsDir
+    } else if (typeof assetFileNames === 'string') {
+      return path.dirname(assetFileNames)
+    } else {
+      return path.dirname(
+        assetFileNames({
+          name: cssAssetName,
+          type: 'asset',
+          source: '/* vite internal call, ignore */'
+        })
+      )
+    }
+  }
+
   return {
     name: 'vite:css-post',
 
@@ -414,35 +449,42 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return null
       }
 
-      // resolve asset URL placeholders to their built file URLs and perform
-      // minification if necessary
-      const processChunkCSS = async (
-        css: string,
-        {
-          inlined,
-          minify
-        }: {
-          inlined: boolean
-          minify: boolean
-        }
-      ) => {
+      const publicAssetUrlMap = publicAssetUrlCache.get(config)!
+
+      // resolve asset URL placeholders to their built file URLs
+      function resolveAssetUrlsInCss(chunkCSS: string, cssAssetName: string) {
+        const cssAssetDirname = relativeBase
+          ? getCssAssetDirname(cssAssetName)
+          : undefined
+
         // replace asset url references with resolved url.
-        const isRelativeBase = config.base === '' || config.base.startsWith('.')
-        css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
+        chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
-          if (!isRelativeBase || inlined) {
-            // absolute base or relative base but inlined (injected as style tag into
-            // index.html) use the base as-is
-            return config.base + filename
+          if (relativeBase) {
+            // relative base + extracted CSS
+            const relativePath = path.posix.relative(cssAssetDirname!, filename)
+            return relativePath.startsWith('.')
+              ? relativePath
+              : './' + relativePath
           } else {
-            // relative base + extracted CSS - asset file will be in the same dir
-            return `./${path.posix.basename(filename)}`
+            // absolute base
+            return config.base + filename
           }
         })
-        // only external @imports and @charset should exist at this point
-        css = await finalizeCss(css, minify, config)
-        return css
+        // resolve public URL from CSS paths
+        if (relativeBase) {
+          const relativePathToPublicFromCSS = path.posix.relative(
+            cssAssetDirname!,
+            ''
+          )
+          chunkCSS = chunkCSS.replace(
+            publicAssetUrlRE,
+            (_, hash) =>
+              relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
+          )
+        }
+        return chunkCSS
       }
 
       if (config.build.cssCodeSplit) {
@@ -455,23 +497,25 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           opts.format === 'cjs' ||
           opts.format === 'system'
         ) {
-          chunkCSS = await processChunkCSS(chunkCSS, {
-            inlined: false,
-            minify: true
-          })
+          const cssAssetName = chunk.name + '.css'
+
+          chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
+          chunkCSS = await finalizeCss(chunkCSS, true, config)
+
           // emit corresponding css file
           const fileHandle = this.emitFile({
-            name: chunk.name + '.css',
+            name: cssAssetName,
             type: 'asset',
             source: chunkCSS
           })
           chunk.viteMetadata.importedCss.add(this.getFileName(fileHandle))
         } else if (!config.build.ssr) {
-          // legacy build, inline css
-          chunkCSS = await processChunkCSS(chunkCSS, {
-            inlined: true,
-            minify: true
-          })
+          // legacy build and inline css
+
+          // __VITE_ASSET__ and __VITE_PUBLIC_ASSET__ urls are processed by
+          // the vite:asset plugin, don't call resolveAssetUrlsInCss here
+          chunkCSS = await finalizeCss(chunkCSS, true, config)
+
           const style = `__vite_style__`
           const injectCode =
             `var ${style} = document.createElement('style');` +
@@ -480,6 +524,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           if (config.build.sourcemap) {
             const s = new MagicString(code)
             s.prepend(injectCode)
+            // resolve public URL from CSS paths, we need to use absolute paths
             return {
               code: s.toString(),
               map: s.generateMap({ hires: true })
@@ -489,11 +534,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
         }
       } else {
-        // non-split extracted CSS will be minified together
-        chunkCSS = await processChunkCSS(chunkCSS, {
-          inlined: false,
-          minify: false
-        })
+        chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssBundleName)
+        // finalizeCss is called for the aggregated chunk in generateBundle
+
         outputToExtractedCSSMap.set(
           opts,
           (outputToExtractedCSSMap.get(opts) || '') + chunkCSS
@@ -557,7 +600,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         hasEmitted = true
         extractedCss = await finalizeCss(extractedCss, true, config)
         this.emitFile({
-          name: 'style.css',
+          name: cssBundleName,
           type: 'asset',
           source: extractedCss
         })
@@ -748,7 +791,8 @@ async function compileCSS(
   }
   postcssPlugins.push(
     UrlRewritePostcssPlugin({
-      replacer: urlReplacer
+      replacer: urlReplacer,
+      logger: config.logger
     }) as PostCSS.Plugin
   )
 
@@ -980,6 +1024,7 @@ const cssImageSetRE = /(?<=image-set\()((?:[\w\-]+\([^\)]*\)|[^)])*)(?=\))/
 
 const UrlRewritePostcssPlugin: PostCSS.PluginCreator<{
   replacer: CssUrlReplacer
+  logger: Logger
 }> = (opts) => {
   if (!opts) {
     throw new Error('base or replace is required')
@@ -990,11 +1035,19 @@ const UrlRewritePostcssPlugin: PostCSS.PluginCreator<{
     Once(root) {
       const promises: Promise<void>[] = []
       root.walkDecls((declaration) => {
+        const importer = declaration.source?.input.file
+        if (!importer) {
+          opts.logger.warnOnce(
+            '\nA PostCSS plugin did not pass the `from` option to `postcss.parse`. ' +
+              'This may cause imported assets to be incorrectly transformed. ' +
+              "If you've recently added a PostCSS plugin that raised this warning, " +
+              'please contact the package author to fix the issue.'
+          )
+        }
         const isCssUrl = cssUrlRE.test(declaration.value)
         const isCssImageSet = cssImageSetRE.test(declaration.value)
         if (isCssUrl || isCssImageSet) {
           const replacerForDeclaration = (rawUrl: string) => {
-            const importer = declaration.source?.input.file
             return opts.replacer(rawUrl, importer)
           }
           const rewriterToUse = isCssImageSet
diff --git a/packages/vite/src/node/plugins/esbuild.ts b/packages/vite/src/node/plugins/esbuild.ts
index 7b02af2152cb70..22fabf27099c00 100644
--- a/packages/vite/src/node/plugins/esbuild.ts
+++ b/packages/vite/src/node/plugins/esbuild.ts
@@ -12,15 +12,15 @@ import type { SourceMap } from 'rollup'
 import { createFilter } from '@rollup/pluginutils'
 import type { TSConfckParseOptions, TSConfckParseResult } from 'tsconfck'
 import { TSConfckParseError, findAll, parse } from 'tsconfck'
-import { combineSourcemaps } from '../utils'
-import type { ResolvedConfig, ViteDevServer } from '..'
 import {
   cleanUrl,
+  combineSourcemaps,
   createDebugger,
   ensureWatchedFile,
   generateCodeFrame,
   toUpperCaseDriveLetter
 } from '../utils'
+import type { ResolvedConfig, ViteDevServer } from '..'
 import type { Plugin } from '../plugin'
 import { searchForWorkspaceRoot } from '..'
 
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 8e48a023d021cc..9d06d6e168f2e1 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -24,6 +24,7 @@ import {
   getHash,
   isDataUrl,
   isExternalUrl,
+  isRelativeBase,
   normalizePath,
   processSrcSet,
   slash
@@ -236,7 +237,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
     async transform(html, id) {
       if (id.endsWith('.html')) {
-        const publicPath = `/${slash(path.relative(config.root, id))}`
+        const relativeUrlPath = slash(path.relative(config.root, id))
+        const publicPath = `/${relativeUrlPath}`
+        const publicBase = getPublicBase(relativeUrlPath, config)
+
         // pre-transform
         html = await applyHtmlTransforms(html, preHooks, {
           path: publicPath,
@@ -272,7 +276,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               s.overwrite(
                 src!.value!.loc.start.offset,
                 src!.value!.loc.end.offset,
-                `"${config.base + url.slice(1)}"`,
+                `"${normalizePublicPath(url, publicBase)}"`,
                 { contentOnly: true }
               )
             }
@@ -354,7 +358,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                   s.overwrite(
                     p.value.loc.start.offset,
                     p.value.loc.end.offset,
-                    `"${config.base + url.slice(1)}"`,
+                    `"${normalizePublicPath(url, publicBase)}"`,
                     { contentOnly: true }
                   )
                 }
@@ -470,7 +474,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               { contentOnly: true }
             )
           } else if (checkPublicFile(url, config)) {
-            s.overwrite(start, end, config.base + url.slice(1), {
+            s.overwrite(start, end, normalizePublicPath(url, publicBase), {
               contentOnly: true
             })
           }
@@ -531,6 +535,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
       const toScriptTag = (
         chunk: OutputChunk,
+        publicBase: string,
         isAsync: boolean
       ): HtmlTagDescriptor => ({
         tag: 'script',
@@ -538,21 +543,25 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           ...(isAsync ? { async: true } : {}),
           type: 'module',
           crossorigin: true,
-          src: toPublicPath(chunk.fileName, config)
+          src: toPublicPath(chunk.fileName, publicBase)
         }
       })
 
-      const toPreloadTag = (chunk: OutputChunk): HtmlTagDescriptor => ({
+      const toPreloadTag = (
+        chunk: OutputChunk,
+        publicBase: string
+      ): HtmlTagDescriptor => ({
         tag: 'link',
         attrs: {
           rel: 'modulepreload',
           crossorigin: true,
-          href: toPublicPath(chunk.fileName, config)
+          href: toPublicPath(chunk.fileName, publicBase)
         }
       })
 
       const getCssTagsForChunk = (
         chunk: OutputChunk,
+        publicBase: string,
         seen: Set<string> = new Set()
       ): HtmlTagDescriptor[] => {
         const tags: HtmlTagDescriptor[] = []
@@ -561,7 +570,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           chunk.imports.forEach((file) => {
             const importee = bundle[file]
             if (importee?.type === 'chunk') {
-              tags.push(...getCssTagsForChunk(importee, seen))
+              tags.push(...getCssTagsForChunk(importee, publicBase, seen))
             }
           })
         }
@@ -573,7 +582,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               tag: 'link',
               attrs: {
                 rel: 'stylesheet',
-                href: toPublicPath(file, config)
+                href: toPublicPath(file, publicBase)
               }
             })
           }
@@ -583,6 +592,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       }
 
       for (const [id, html] of processedHtml) {
+        const relativeUrlPath = path.posix.relative(config.root, id)
+        const publicBase = getPublicBase(relativeUrlPath, config)
+
         const isAsync = isAsyncScriptMap.get(config)!.get(id)!
 
         let result = html
@@ -610,10 +622,13 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           // when inlined, discard entry chunk and inject <script> for everything in post-order
           const imports = getImportedChunks(chunk)
           const assetTags = canInlineEntry
-            ? imports.map((chunk) => toScriptTag(chunk, isAsync))
-            : [toScriptTag(chunk, isAsync), ...imports.map(toPreloadTag)]
+            ? imports.map((chunk) => toScriptTag(chunk, publicBase, isAsync))
+            : [
+                toScriptTag(chunk, publicBase, isAsync),
+                ...imports.map((i) => toPreloadTag(i, publicBase))
+              ]
 
-          assetTags.push(...getCssTagsForChunk(chunk))
+          assetTags.push(...getCssTagsForChunk(chunk, publicBase))
 
           result = injectToHead(result, assetTags)
         }
@@ -629,7 +644,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                 tag: 'link',
                 attrs: {
                   rel: 'stylesheet',
-                  href: toPublicPath(cssChunk.fileName, config)
+                  href: toPublicPath(cssChunk.fileName, publicBase)
                 }
               }
             ])
@@ -653,7 +668,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         if (s) {
           result = s.toString()
         }
-        const relativeUrlPath = path.posix.relative(config.root, id)
         result = await applyHtmlTransforms(result, postHooks, {
           path: '/' + relativeUrlPath,
           filename: id,
@@ -662,7 +676,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         })
         // resolve asset url references
         result = result.replace(assetUrlRE, (_, fileHash, postfix = '') => {
-          return config.base + getAssetFilename(fileHash, config) + postfix
+          return publicBase + getAssetFilename(fileHash, config) + postfix
         })
 
         if (chunk && canInlineEntry) {
@@ -812,8 +826,21 @@ function isEntirelyImport(code: string) {
   return !code.replace(importRE, '').replace(commentRE, '').trim().length
 }
 
-function toPublicPath(filename: string, config: ResolvedConfig) {
-  return isExternalUrl(filename) ? filename : config.base + filename
+function getPublicBase(urlRelativePath: string, config: ResolvedConfig) {
+  return isRelativeBase(config.base)
+    ? path.posix.join(
+        path.posix.relative(urlRelativePath, '').slice(0, -2),
+        './'
+      )
+    : config.base
+}
+
+function toPublicPath(filename: string, publicBase: string) {
+  return isExternalUrl(filename) ? filename : publicBase + filename
+}
+
+function normalizePublicPath(publicPath: string, publicBase: string) {
+  return publicBase + publicPath.slice(1)
 }
 
 const headInjectRE = /([ \t]*)<\/head>/i
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 36696986a4aacf..43f35a7147876d 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -4,7 +4,7 @@ import type { ImportSpecifier } from 'es-module-lexer'
 import { init, parse as parseImports } from 'es-module-lexer'
 import type { OutputChunk, SourceMap } from 'rollup'
 import type { RawSourceMap } from '@ampproject/remapping'
-import { bareImportRE, combineSourcemaps } from '../utils'
+import { bareImportRE, combineSourcemaps, isRelativeBase } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { genSourceMapUrl } from '../server/sourcemap'
@@ -20,7 +20,7 @@ export const preloadMethod = `__vitePreload`
 export const preloadMarker = `__VITE_PRELOAD__`
 export const preloadBaseMarker = `__VITE_PRELOAD_BASE__`
 
-const preloadHelperId = 'vite/preload-helper'
+export const preloadHelperId = '\0vite/preload-helper'
 const preloadMarkerWithQuote = `"${preloadMarker}"` as const
 
 const dynamicImportPrefixRE = /import\s*\(/
@@ -40,7 +40,11 @@ function detectScriptRel() {
 }
 
 declare const scriptRel: string
-function preload(baseModule: () => Promise<{}>, deps?: string[]) {
+function preload(
+  baseModule: () => Promise<{}>,
+  deps?: string[],
+  importerUrl?: string
+) {
   // @ts-ignore
   if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {
     return baseModule()
@@ -49,7 +53,7 @@ function preload(baseModule: () => Promise<{}>, deps?: string[]) {
   return Promise.all(
     deps.map((dep) => {
       // @ts-ignore
-      dep = `${base}${dep}`
+      dep = assetsURL(dep, importerUrl)
       // @ts-ignore
       if (dep in seen) return
       // @ts-ignore
@@ -91,10 +95,15 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   const isWorker = config.isWorker
   const insertPreload = !(ssr || !!config.build.lib || isWorker)
 
+  const relativeBase = isRelativeBase(config.base)
+
   const scriptRel = config.build.polyfillModulePreload
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
-  const preloadCode = `const scriptRel = ${scriptRel};const seen = {};const base = '${preloadBaseMarker}';export const ${preloadMethod} = ${preload.toString()}`
+  const assetsURL = relativeBase
+    ? `function(dep,importerUrl) { return new URL(dep, importerUrl).href }`
+    : `function(dep) { return ${JSON.stringify(config.base)}+dep }`
+  const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
 
   return {
     name: 'vite:build-import-analysis',
@@ -107,7 +116,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
     load(id) {
       if (id === preloadHelperId) {
-        return preloadCode.replace(preloadBaseMarker, config.base)
+        return preloadCode
       }
     },
 
@@ -152,7 +161,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           str().prependLeft(expStart, `${preloadMethod}(() => `)
           str().appendRight(
             expEnd,
-            `,${isModernFlag}?"${preloadMarker}":void 0)`
+            `,${isModernFlag}?"${preloadMarker}":void 0${
+              relativeBase ? ',import.meta.url' : ''
+            })`
           )
         }
 
@@ -312,12 +323,21 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                 s.overwrite(
                   markerStartPos,
                   markerStartPos + preloadMarkerWithQuote.length,
-                  // the dep list includes the main chunk, so only need to
-                  // preload when there are actual other deps.
+                  // the dep list includes the main chunk, so only need to reload when there are
+                  // actual other deps. Don't include the assets dir if the default asset file names
+                  // are used, the path will be reconstructed by the import preload helper
                   deps.size > 1 ||
                     // main chunk is removed
                     (hasRemovedPureCssChunk && deps.size > 0)
-                    ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
+                    ? `[${[...deps]
+                        .map((d) =>
+                          JSON.stringify(
+                            relativeBase
+                              ? path.relative(path.dirname(file), d)
+                              : d
+                          )
+                        )
+                        .join(',')}]`
                     : `[]`,
                   { contentOnly: true }
                 )
diff --git a/packages/vite/src/node/plugins/importMetaGlob.ts b/packages/vite/src/node/plugins/importMetaGlob.ts
index 3282014d2ffca3..5564bedefb8eac 100644
--- a/packages/vite/src/node/plugins/importMetaGlob.ts
+++ b/packages/vite/src/node/plugins/importMetaGlob.ts
@@ -1,7 +1,13 @@
 import { isAbsolute, posix } from 'path'
 import { isMatch, scan } from 'micromatch'
 import { stripLiteral } from 'strip-literal'
-import type { ArrayExpression, CallExpression, Literal, Node } from 'estree'
+import type {
+  ArrayExpression,
+  CallExpression,
+  Literal,
+  Node,
+  SequenceExpression
+} from 'estree'
 import { parseExpressionAt } from 'acorn'
 import MagicString from 'magic-string'
 import fg from 'fast-glob'
@@ -111,21 +117,45 @@ export async function parseImportGlob(
       return e
     }
 
-    let ast: CallExpression
+    let ast: CallExpression | SequenceExpression
+    let lastTokenPos: number | undefined
 
     try {
       ast = parseExpressionAt(code, start, {
         ecmaVersion: 'latest',
         sourceType: 'module',
-        ranges: true
+        ranges: true,
+        onToken: (token) => {
+          lastTokenPos = token.end
+        }
       }) as any
     } catch (e) {
       const _e = e as any
       if (_e.message && _e.message.startsWith('Unterminated string constant'))
         return undefined!
-      throw _e
+      if (lastTokenPos == null || lastTokenPos <= start) throw _e
+
+      // tailing comma in object or array will make the parser think it's a comma operation
+      // we try to parse again removing the comma
+      try {
+        const statement = code.slice(start, lastTokenPos).replace(/[,\s]*$/, '')
+        ast = parseExpressionAt(
+          ' '.repeat(start) + statement, // to keep the ast position
+          start,
+          {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            ranges: true
+          }
+        ) as any
+      } catch {
+        throw _e
+      }
     }
 
+    if (ast.type === 'SequenceExpression')
+      ast = ast.expressions[0] as CallExpression
+
     if (ast.type !== 'CallExpression')
       throw err(`Expect CallExpression, got ${ast.type}`)
 
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index b4a298bc334d41..ac6cface14fbeb 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -10,7 +10,7 @@ import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
 import { buildHtmlPlugin, htmlInlineProxyPlugin } from './html'
-import { wasmPlugin } from './wasm'
+import { wasmFallbackPlugin, wasmHelperPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
 import { preAliasPlugin } from './preAlias'
@@ -64,10 +64,11 @@ export async function resolvePlugins(
       },
       isBuild
     ),
-    wasmPlugin(config),
+    wasmHelperPlugin(config),
     webWorkerPlugin(config),
     assetPlugin(config),
     ...normalPlugins,
+    wasmFallbackPlugin(),
     definePlugin(config),
     cssPostPlugin(config),
     config.build.ssr ? ssrRequireHookPlugin(config) : null,
diff --git a/packages/vite/src/node/plugins/manifest.ts b/packages/vite/src/node/plugins/manifest.ts
index 02fbdce63eec78..9784597195dc7c 100644
--- a/packages/vite/src/node/plugins/manifest.ts
+++ b/packages/vite/src/node/plugins/manifest.ts
@@ -37,7 +37,8 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
           )
           if (format === 'system' && !chunk.name.includes('-legacy')) {
             const ext = path.extname(name)
-            name = name.slice(0, -ext.length) + `-legacy` + ext
+            const endPos = ext.length !== 0 ? -ext.length : undefined
+            name = name.slice(0, endPos) + `-legacy` + ext
           }
           return name.replace(/\0/g, '')
         } else {
diff --git a/packages/vite/src/node/plugins/wasm.ts b/packages/vite/src/node/plugins/wasm.ts
index 1f64434a5b9781..56aa56402df8e2 100644
--- a/packages/vite/src/node/plugins/wasm.ts
+++ b/packages/vite/src/node/plugins/wasm.ts
@@ -37,14 +37,14 @@ const wasmHelper = async (opts = {}, url: string) => {
       result = await WebAssembly.instantiate(buffer, opts)
     }
   }
-  return result.instance.exports
+  return result.instance
 }
 
 const wasmHelperCode = wasmHelper.toString()
 
-export const wasmPlugin = (config: ResolvedConfig): Plugin => {
+export const wasmHelperPlugin = (config: ResolvedConfig): Plugin => {
   return {
-    name: 'vite:wasm',
+    name: 'vite:wasm-helper',
 
     resolveId(id) {
       if (id === wasmHelperId) {
@@ -57,7 +57,7 @@ export const wasmPlugin = (config: ResolvedConfig): Plugin => {
         return `export default ${wasmHelperCode}`
       }
 
-      if (!id.endsWith('.wasm')) {
+      if (!id.endsWith('.wasm?init')) {
         return
       }
 
@@ -70,3 +70,22 @@ export default opts => initWasm(opts, ${JSON.stringify(url)})
     }
   }
 }
+
+export const wasmFallbackPlugin = (): Plugin => {
+  return {
+    name: 'vite:wasm-fallback',
+
+    async load(id) {
+      if (!id.endsWith('.wasm')) {
+        return
+      }
+
+      throw new Error(
+        '"ESM integration proposal for Wasm" is not supported currently. ' +
+          'Use vite-plugin-wasm or other community plugins to handle this. ' +
+          'Alternatively, you can use `.wasm?init` or `.wasm?url`. ' +
+          'See https://vitejs.dev/guide/features.html#webassembly for more details.'
+      )
+    }
+  }
+}
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 303a7f0f60fb7a..99eef51a4a2bd7 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -1,10 +1,17 @@
 import path from 'path'
+import MagicString from 'magic-string'
 import type { EmittedAsset, OutputChunk, TransformPluginContext } from 'rollup'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import type { ViteDevServer } from '../server'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
-import { cleanUrl, injectQuery, parseRequest } from '../utils'
+import {
+  cleanUrl,
+  getHash,
+  injectQuery,
+  isRelativeBase,
+  parseRequest
+} from '../utils'
 import { onRollupWarning } from '../build'
 import { fileToUrl } from './asset'
 
@@ -14,8 +21,11 @@ interface WorkerCache {
 
   // worker bundle don't deps on any more worker runtime info an id only had an result.
   // save worker bundled file id to avoid repeated execution of bundles
-  // <input_filename, hash>
+  // <input_filename, fileName>
   bundle: Map<string, string>
+
+  // <hash, fileName>
+  fileNameHash: Map<string, string>
 }
 
 export type WorkerType = 'classic' | 'module' | 'ignore'
@@ -141,6 +151,20 @@ function emitSourcemapForWorkerEntry(
   return chunk
 }
 
+export const workerAssetUrlRE = /__VITE_WORKER_ASSET__([a-z\d]{8})__/g
+
+function encodeWorkerAssetFileName(
+  fileName: string,
+  workerCache: WorkerCache
+): string {
+  const { fileNameHash } = workerCache
+  const hash = getHash(fileName)
+  if (!fileNameHash.get(hash)) {
+    fileNameHash.set(hash, fileName)
+  }
+  return `__VITE_WORKER_ASSET__${hash}__`
+}
+
 export async function workerFileToUrl(
   ctx: TransformPluginContext,
   config: ResolvedConfig,
@@ -159,7 +183,10 @@ export async function workerFileToUrl(
     })
     workerMap.bundle.set(id, fileName)
   }
-  return config.base + fileName
+
+  return isRelativeBase(config.base)
+    ? encodeWorkerAssetFileName(fileName, workerMap)
+    : config.base + fileName
 }
 
 export function webWorkerPlugin(config: ResolvedConfig): Plugin {
@@ -180,7 +207,8 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
       }
       workerCache.set(config, {
         assets: new Map(),
-        bundle: new Map()
+        bundle: new Map(),
+        fileNameHash: new Map()
       })
     },
 
@@ -229,6 +257,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
+      // stringified url or `new URL(...)`
       let url: string
       if (isBuild) {
         if (query.inline != null) {
@@ -276,15 +305,51 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         code: `export default function WorkerWrapper() {
           return new ${workerConstructor}(${JSON.stringify(
           url
-        )}, ${JSON.stringify(workerOptions, null, 2)})
+        )}, ${JSON.stringify(workerOptions)})
         }`,
         map: { mappings: '' } // Empty sourcemap to suppress Rollup warning
       }
     },
 
-    renderChunk(code) {
-      if (config.isWorker && code.includes('import.meta.url')) {
-        return code.replace('import.meta.url', 'self.location.href')
+    renderChunk(code, chunk) {
+      let s: MagicString
+      const result = () => {
+        return (
+          s && {
+            code: s.toString(),
+            map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
+          }
+        )
+      }
+      if (code.match(workerAssetUrlRE) || code.includes('import.meta.url')) {
+        let match: RegExpExecArray | null
+        s = new MagicString(code)
+
+        // Replace "__VITE_WORKER_ASSET__5aa0ddc0__" using relative paths
+        const workerMap = workerCache.get(config.mainConfig || config)!
+        const { fileNameHash } = workerMap
+
+        while ((match = workerAssetUrlRE.exec(code))) {
+          const [full, hash] = match
+          const filename = fileNameHash.get(hash)!
+          let outputFilepath = path.posix.relative(
+            path.dirname(chunk.fileName),
+            filename
+          )
+          if (!outputFilepath.startsWith('.')) {
+            outputFilepath = './' + outputFilepath
+          }
+          const replacement = JSON.stringify(outputFilepath).slice(1, -1)
+          s.overwrite(match.index, match.index + full.length, replacement, {
+            contentOnly: true
+          })
+        }
+
+        // TODO: check if this should be removed
+        if (config.isWorker) {
+          s = s.replace('import.meta.url', 'self.location.href')
+          return result()
+        }
       }
       if (!isWorker) {
         const workerMap = workerCache.get(config)!
@@ -293,6 +358,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           workerMap.assets.delete(asset.fileName!)
         })
       }
+      return result()
     }
   }
 }
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 3f3d743cef6346..cf3ab11fb6686e 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -5,9 +5,8 @@ import type { RollupError } from 'rollup'
 import { stripLiteral } from 'strip-literal'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { cleanUrl, injectQuery } from '../utils'
-import { parseRequest } from '../utils'
-import type { WorkerType } from './worker'
+import { cleanUrl, injectQuery, normalizePath, parseRequest } from '../utils'
+import type { WorkerType} from './worker';
 import { WORKER_FILE_ID, workerFileToUrl } from './worker'
 import { fileToUrl } from './asset'
 
@@ -111,7 +110,9 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             cleanString,
             index + allExp.length
           )
-          const file = path.resolve(path.dirname(id), rawUrl.slice(1, -1))
+          const file = normalizePath(
+            path.resolve(path.dirname(id), rawUrl.slice(1, -1))
+          )
           let url: string
           if (isBuild) {
             url = await workerFileToUrl(this, config, file, query)
diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts
index bb3aded53f686a..e66733d5c971b6 100644
--- a/packages/vite/src/node/preview.ts
+++ b/packages/vite/src/node/preview.ts
@@ -1,5 +1,4 @@
 import path from 'path'
-import type { Server } from 'http'
 import type * as http from 'http'
 import sirv from 'sirv'
 import connect from 'connect'
@@ -47,7 +46,7 @@ export interface PreviewServer {
   /**
    * native Node http server instance
    */
-  httpServer: Server
+  httpServer: http.Server
   /**
    * Print server urls
    */
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index b7e05c2951ba00..4dafb7fc99b335 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -2,7 +2,6 @@ import fs from 'fs'
 import path from 'path'
 import type * as net from 'net'
 import type * as http from 'http'
-import type { AddressInfo } from 'net'
 import { performance } from 'perf_hooks'
 import connect from 'connect'
 import corsMiddleware from 'cors'
@@ -16,7 +15,7 @@ import type { CommonServerOptions } from '../http'
 import { httpServerStart, resolveHttpServer, resolveHttpsConfig } from '../http'
 import type { InlineConfig, ResolvedConfig } from '../config'
 import { mergeConfig, resolveConfig } from '../config'
-import { isParentDirectory, normalizePath } from '../utils'
+import { isParentDirectory, normalizePath, resolveHostname } from '../utils'
 import { ssrLoadModule } from '../ssr/ssrModuleLoader'
 import { resolveSSRExternal } from '../ssr/ssrExternal'
 import {
@@ -26,7 +25,6 @@ import {
 import { ssrTransform } from '../ssr/ssrTransform'
 import { createOptimizedDeps } from '../optimizer/registerMissing'
 import type { OptimizedDeps } from '../optimizer'
-import { resolveHostname } from '../utils'
 import { CLIENT_DIR } from '../constants'
 import type { Logger } from '../logger'
 import { printCommonServerUrls } from '../logger'
@@ -452,7 +450,7 @@ export async function createServer(
   if (!middlewareMode && httpServer) {
     httpServer.once('listening', () => {
       // update actual port since this may be different from initial value
-      serverConfig.port = (httpServer.address() as AddressInfo).port
+      serverConfig.port = (httpServer.address() as net.AddressInfo).port
     })
   }
 
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 76b190bfa0ce85..161c2c9065924d 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -27,7 +27,8 @@ import {
   ensureWatchedFile,
   fsPathFromId,
   injectQuery,
-  normalizePath
+  normalizePath,
+  processSrcSetSync
 } from '../../utils'
 import type { ModuleGraph } from '../moduleGraph'
 
@@ -79,7 +80,7 @@ const processNodeUrl = (
     }
   }
   if (startsWithSingleSlashRE.test(url)) {
-    // prefix with base
+    // prefix with base (dev only, base is never relative)
     s.overwrite(
       node.value!.loc.start.offset,
       node.value!.loc.end.offset,
@@ -92,18 +93,23 @@ const processNodeUrl = (
     originalUrl !== '/' &&
     htmlPath === '/index.html'
   ) {
-    // #3230 if some request url (localhost:5173/a/b) return to fallback html, the relative assets
+    const replacer = (url: string) =>
+      path.posix.join(
+        config.base,
+        path.posix.relative(originalUrl, config.base),
+        url.slice(1)
+      )
+
+    // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets
     // path will add `/a/` prefix, it will caused 404.
     // rewrite before `./index.js` -> `localhost:5173/a/index.js`.
     // rewrite after `../index.js` -> `localhost:5173/index.js`.
     s.overwrite(
       node.value!.loc.start.offset,
       node.value!.loc.end.offset,
-      `"${path.posix.join(
-        path.posix.relative(originalUrl, '/'),
-        url.slice(1)
-      )}"`,
-      { contentOnly: true }
+      node.name === 'srcset'
+        ? `"${processSrcSetSync(url, ({ url }) => replacer(url))}"`
+        : `"${replacer(url)}"`
     )
   }
 }
@@ -159,7 +165,7 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     // add HTML Proxy to Map
     addToHTMLProxyCache(config, proxyCacheUrl, inlineModuleIndex, { code, map })
 
-    // inline js module. convert to src="proxy"
+    // inline js module. convert to src="proxy" (dev only, base is never relative)
     const modulePath = `${proxyModuleUrl}?html-proxy&index=${inlineModuleIndex}.${ext}`
 
     // invalidate the module so the newly cached contents will be served
diff --git a/packages/vite/src/node/server/pluginContainer.ts b/packages/vite/src/node/server/pluginContainer.ts
index 4016f6a0b71741..ce021112779d4b 100644
--- a/packages/vite/src/node/server/pluginContainer.ts
+++ b/packages/vite/src/node/server/pluginContainer.ts
@@ -56,8 +56,9 @@ import type { FSWatcher } from 'chokidar'
 import colors from 'picocolors'
 import type * as postcss from 'postcss'
 import type { Plugin } from '../plugin'
-import { cleanUrl, combineSourcemaps } from '../utils'
 import {
+  cleanUrl,
+  combineSourcemaps,
   createDebugger,
   ensureWatchedFile,
   generateCodeFrame,
diff --git a/packages/vite/src/node/server/searchRoot.ts b/packages/vite/src/node/server/searchRoot.ts
index 472f2ae6f005f0..1fa63eff4e024d 100644
--- a/packages/vite/src/node/server/searchRoot.ts
+++ b/packages/vite/src/node/server/searchRoot.ts
@@ -1,6 +1,5 @@
 import fs from 'fs'
-import { dirname } from 'path'
-import { join } from 'path'
+import { dirname, join } from 'path'
 import { isFileReadable } from '../utils'
 
 // https://github.com/vitejs/vite/issues/2820#issuecomment-812495079
diff --git a/packages/vite/src/node/server/ws.ts b/packages/vite/src/node/server/ws.ts
index af6b20b0434241..fa6f2b1cdeb25c 100644
--- a/packages/vite/src/node/server/ws.ts
+++ b/packages/vite/src/node/server/ws.ts
@@ -160,7 +160,12 @@ export function createWebSocketServer(
   })
 
   wss.on('error', (e: Error & { code: string }) => {
-    if (e.code !== 'EADDRINUSE') {
+    if (e.code === 'EADDRINUSE') {
+      config.logger.error(
+        colors.red(`WebSocket server error: Port is already in use`),
+        { error: e }
+      )
+    } else {
       config.logger.error(
         colors.red(`WebSocket server error:\n${e.stack || e.message}`),
         { error: e }
diff --git a/packages/vite/src/node/tsconfig.json b/packages/vite/src/node/tsconfig.json
index 166ddb4a1d5935..4116608b4d5a4f 100644
--- a/packages/vite/src/node/tsconfig.json
+++ b/packages/vite/src/node/tsconfig.json
@@ -3,11 +3,9 @@
   "include": ["./", "../../types"],
   "exclude": ["**/__tests__"],
   "compilerOptions": {
-    // compile away optional-chaining-operator
-    // node support table: https://node.green/#ES2020-features-optional-chaining-operator-----
-    "target": "ES2019",
+    "target": "ES2020",
     "outDir": "../../dist/node",
-    "module": "commonjs",
+    "module": "CommonJS",
     "lib": ["ESNext", "DOM"],
     "sourceMap": true
   }
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 3748aa3b465b2c..d537eb9d971673 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -3,10 +3,9 @@ import os from 'os'
 import path from 'path'
 import { createHash } from 'crypto'
 import { promisify } from 'util'
-import { URL, pathToFileURL } from 'url'
+import { URL, URLSearchParams, pathToFileURL } from 'url'
 import { builtinModules } from 'module'
 import { performance } from 'perf_hooks'
-import { URLSearchParams } from 'url'
 import resolve from 'resolve'
 import type { FSWatcher } from 'chokidar'
 import remapping from '@ampproject/remapping'
@@ -281,6 +280,10 @@ export function removeTimestampQuery(url: string): string {
   return url.replace(timestampRE, '').replace(trailingSeparatorRE, '')
 }
 
+export function isRelativeBase(base: string): boolean {
+  return base === '' || base.startsWith('.')
+}
+
 export async function asyncReplace(
   input: string,
   re: RegExp,
@@ -557,11 +560,16 @@ interface ImageCandidate {
 }
 const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
 const imageSetUrlRE = /^(?:[\w\-]+\(.*?\)|'.*?'|".*?"|\S*)/
-export async function processSrcSet(
-  srcs: string,
-  replacer: (arg: ImageCandidate) => Promise<string>
-): Promise<string> {
-  const imageCandidates: ImageCandidate[] = splitSrcSet(srcs)
+function reduceSrcset(ret: { url: string; descriptor: string }[]) {
+  return ret.reduce((prev, { url, descriptor }, index) => {
+    descriptor ??= ''
+    return (prev +=
+      url + ` ${descriptor}${index === ret.length - 1 ? '' : ', '}`)
+  }, '')
+}
+
+function splitSrcSetDescriptor(srcs: string): ImageCandidate[] {
+  return splitSrcSet(srcs)
     .map((s) => {
       const src = s.replace(escapedSpaceCharacters, ' ').trim()
       const [url] = imageSetUrlRE.exec(src) || []
@@ -572,21 +580,30 @@ export async function processSrcSet(
       }
     })
     .filter(({ url }) => !!url)
+}
 
-  const ret = await Promise.all(
-    imageCandidates.map(async ({ url, descriptor }) => {
-      return {
-        url: await replacer({ url, descriptor }),
-        descriptor
-      }
-    })
-  )
+export function processSrcSet(
+  srcs: string,
+  replacer: (arg: ImageCandidate) => Promise<string>
+): Promise<string> {
+  return Promise.all(
+    splitSrcSetDescriptor(srcs).map(async ({ url, descriptor }) => ({
+      url: await replacer({ url, descriptor }),
+      descriptor
+    }))
+  ).then((ret) => reduceSrcset(ret))
+}
 
-  return ret.reduce((prev, { url, descriptor }, index) => {
-    descriptor ??= ''
-    return (prev +=
-      url + ` ${descriptor}${index === ret.length - 1 ? '' : ', '}`)
-  }, '')
+export function processSrcSetSync(
+  srcs: string,
+  replacer: (arg: ImageCandidate) => string
+): string {
+  return reduceSrcset(
+    splitSrcSetDescriptor(srcs).map(({ url, descriptor }) => ({
+      url: replacer({ url, descriptor }),
+      descriptor
+    }))
+  )
 }
 
 function splitSrcSet(srcs: string) {
diff --git a/packages/vite/tsconfig.base.json b/packages/vite/tsconfig.base.json
index b76fc881a81dc9..1b417945798eaa 100644
--- a/packages/vite/tsconfig.base.json
+++ b/packages/vite/tsconfig.base.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2018",
+    "target": "ES2020",
     "moduleResolution": "node",
     "strict": true,
     "declaration": true,
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index b3da12a0003e57..20040c173c7f87 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -192,7 +192,7 @@ describe('image', () => {
       expect(s).toMatch(
         isBuild
           ? /\/foo\/assets\/asset\.\w{8}\.png \d{1}x/
-          : /\.\/nested\/asset\.png \d{1}x/
+          : /\/foo\/nested\/asset\.png \d{1}x/
       )
     })
   })
diff --git a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
new file mode 100644
index 00000000000000..a09116c88a7ea6
--- /dev/null
+++ b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
@@ -0,0 +1,235 @@
+import { describe, expect, test } from 'vitest'
+import {
+  browserLogs,
+  findAssetFile,
+  getBg,
+  getColor,
+  isBuild,
+  page
+} from '~utils'
+
+const absoluteAssetMatch = isBuild
+  ? /http.*\/other-assets\/asset\.\w{8}\.png/
+  : '/nested/asset.png'
+
+// Asset URLs in CSS are relative to the same dir, the computed
+// style returns the absolute URL in the test
+const cssBgAssetMatch = absoluteAssetMatch
+
+const iconMatch = `/icon.png`
+
+const absoluteIconMatch = isBuild
+  ? /http.*\/icon\.\w{8}\.png/
+  : '/nested/icon.png'
+
+const absolutePublicIconMatch = isBuild ? /http.*\/icon\.png/ : '/icon.png'
+
+test('should have no 404s', () => {
+  browserLogs.forEach((msg) => {
+    expect(msg).not.toMatch('404')
+  })
+})
+
+describe('raw references from /public', () => {
+  test('load raw js from /public', async () => {
+    expect(await page.textContent('.raw-js')).toMatch('[success]')
+  })
+
+  test('load raw css from /public', async () => {
+    expect(await getColor('.raw-css')).toBe('red')
+  })
+})
+
+test('import-expression from simple script', async () => {
+  expect(await page.textContent('.import-expression')).toMatch(
+    '[success][success]'
+  )
+})
+
+describe('asset imports from js', () => {
+  test('relative', async () => {
+    expect(await page.textContent('.asset-import-relative')).toMatch(
+      cssBgAssetMatch
+    )
+  })
+
+  test('absolute', async () => {
+    expect(await page.textContent('.asset-import-absolute')).toMatch(
+      cssBgAssetMatch
+    )
+  })
+
+  test('from /public', async () => {
+    expect(await page.textContent('.public-import')).toMatch(
+      absolutePublicIconMatch
+    )
+  })
+})
+
+describe('css url() references', () => {
+  test('fonts', async () => {
+    expect(
+      await page.evaluate(() => {
+        return (document as any).fonts.check('700 32px Inter')
+      })
+    ).toBe(true)
+  })
+
+  test('relative', async () => {
+    const bg = await getBg('.css-url-relative')
+    expect(bg).toMatch(cssBgAssetMatch)
+  })
+
+  test('image-set relative', async () => {
+    const imageSet = await getBg('.css-image-set-relative')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('image-set without the url() call', async () => {
+    const imageSet = await getBg('.css-image-set-without-url-call')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('image-set with var', async () => {
+    const imageSet = await getBg('.css-image-set-with-var')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('image-set with mix', async () => {
+    const imageSet = await getBg('.css-image-set-mix-url-var')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('relative in @import', async () => {
+    expect(await getBg('.css-url-relative-at-imported')).toMatch(
+      cssBgAssetMatch
+    )
+  })
+
+  test('absolute', async () => {
+    expect(await getBg('.css-url-absolute')).toMatch(cssBgAssetMatch)
+  })
+
+  test('from /public', async () => {
+    expect(await getBg('.css-url-public')).toMatch(iconMatch)
+  })
+
+  test('multiple urls on the same line', async () => {
+    const bg = await getBg('.css-url-same-line')
+    expect(bg).toMatch(cssBgAssetMatch)
+    expect(bg).toMatch(iconMatch)
+  })
+
+  test('aliased', async () => {
+    const bg = await getBg('.css-url-aliased')
+    expect(bg).toMatch(cssBgAssetMatch)
+  })
+})
+
+describe.runIf(isBuild)('index.css URLs', () => {
+  let css: string
+  beforeAll(() => {
+    css = findAssetFile(/index.*\.css$/, '', 'other-assets')
+  })
+
+  test('relative asset URL', () => {
+    expect(css).toMatch(`./asset.`)
+  })
+
+  test('preserve postfix query/hash', () => {
+    expect(css).toMatch(`woff2?#iefix`)
+  })
+})
+
+describe('image', () => {
+  test('srcset', async () => {
+    const img = await page.$('.img-src-set')
+    const srcset = await img.getAttribute('srcset')
+    srcset.split(', ').forEach((s) => {
+      expect(s).toMatch(
+        isBuild
+          ? /other-assets\/asset\.\w{8}\.png \d{1}x/
+          : /\.\/nested\/asset\.png \d{1}x/
+      )
+    })
+  })
+})
+
+describe('svg fragments', () => {
+  // 404 is checked already, so here we just ensure the urls end with #fragment
+  test('img url', async () => {
+    const img = await page.$('.svg-frag-img')
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-clock-view$/)
+  })
+
+  test('via css url()', async () => {
+    const bg = await page.evaluate(() => {
+      return getComputedStyle(document.querySelector('.icon')).backgroundImage
+    })
+    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+  })
+
+  test('from js import', async () => {
+    const img = await page.$('.svg-frag-import')
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
+  })
+})
+
+test('?raw import', async () => {
+  expect(await page.textContent('.raw')).toMatch('SVG')
+})
+
+test('?url import', async () => {
+  expect(await page.textContent('.url')).toMatch(
+    isBuild ? /http.*\/other-assets\/foo\.\w{8}\.js/ : `/foo.js`
+  )
+})
+
+test('?url import on css', async () => {
+  const txt = await page.textContent('.url-css')
+  expect(txt).toMatch(
+    isBuild ? /http.*\/other-assets\/icons\.\w{8}\.css/ : '/css/icons.css'
+  )
+})
+
+test('new URL(..., import.meta.url)', async () => {
+  expect(await page.textContent('.import-meta-url')).toMatch(absoluteAssetMatch)
+})
+
+test('new URL(`${dynamic}`, import.meta.url)', async () => {
+  const dynamic1 = await page.textContent('.dynamic-import-meta-url-1')
+  expect(dynamic1).toMatch(absoluteIconMatch)
+  const dynamic2 = await page.textContent('.dynamic-import-meta-url-2')
+  expect(dynamic2).toMatch(absoluteAssetMatch)
+})
+
+test('new URL(`non-existent`, import.meta.url)', async () => {
+  expect(await page.textContent('.non-existent-import-meta-url')).toMatch(
+    '/non-existent'
+  )
+})
+
+test('inline style test', async () => {
+  expect(await getBg('.inline-style')).toMatch(cssBgAssetMatch)
+  expect(await getBg('.style-url-assets')).toMatch(cssBgAssetMatch)
+})
+
+test('html import word boundary', async () => {
+  expect(await page.textContent('.obj-import-express')).toMatch(
+    'ignore object import prop'
+  )
+  expect(await page.textContent('.string-import-express')).toMatch('no load')
+})
+
+test('relative path in html asset', async () => {
+  expect(await page.textContent('.relative-js')).toMatch('hello')
+  expect(await getColor('.relative-css')).toMatch('red')
+})
diff --git a/playground/assets/__tests__/relative-base/vite.config.js b/playground/assets/__tests__/relative-base/vite.config.js
new file mode 100644
index 00000000000000..6837b8ef975a3d
--- /dev/null
+++ b/playground/assets/__tests__/relative-base/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-relative-base')
diff --git "a/playground/assets/nested/\343\203\206\343\202\271\343\203\210-\346\270\254\350\251\246-white space.png" "b/playground/assets/nested/\343\203\206\343\202\271\343\203\210-\346\270\254\350\251\246-white space.png"
index 4388bfdca3d4d7..a8d1e52510c41c 100644
Binary files "a/playground/assets/nested/\343\203\206\343\202\271\343\203\210-\346\270\254\350\251\246-white space.png" and "b/playground/assets/nested/\343\203\206\343\202\271\343\203\210-\346\270\254\350\251\246-white space.png" differ
diff --git a/playground/assets/package.json b/playground/assets/package.json
index 2a1f3148e2cf07..7af81c1bd61c2d 100644
--- a/playground/assets/package.json
+++ b/playground/assets/package.json
@@ -6,6 +6,9 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev:relative-base": "vite --config ./vite.config-relative-base.js dev",
+    "build:relative-base": "vite --config ./vite.config-relative-base.js build",
+    "preview:relative-base": "vite --config ./vite.config-relative-base.js preview"
   }
 }
diff --git a/playground/assets/vite.config-relative-base.js b/playground/assets/vite.config-relative-base.js
new file mode 100644
index 00000000000000..ba624964d3e0e3
--- /dev/null
+++ b/playground/assets/vite.config-relative-base.js
@@ -0,0 +1,23 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+
+const baseConfig = require('./vite.config.js')
+module.exports = {
+  ...baseConfig,
+  base: './', // relative base to make dist portable
+  build: {
+    ...baseConfig.build,
+    outDir: 'dist',
+    watch: false,
+    minify: false,
+    assetsInlineLimit: 0,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'entries/[name].js',
+        chunkFileNames: 'chunks/[name].[hash].js',
+        assetFileNames: 'other-assets/[name].[hash][extname]'
+      }
+    }
+  }
+}
diff --git a/playground/assets/vite.config.js b/playground/assets/vite.config.js
index 1ecd3318627521..e44ddda7995185 100644
--- a/playground/assets/vite.config.js
+++ b/playground/assets/vite.config.js
@@ -13,6 +13,7 @@ module.exports = {
   },
   build: {
     outDir: 'dist/foo',
+    assetsInlineLimit: 8192, // 8kb
     manifest: true,
     watch: {}
   }
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 639a1302debb88..0c2432ec40cf38 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -4,6 +4,7 @@ const path = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: './',
   build: {
     cssTarget: 'chrome61'
   },
diff --git a/playground/env/__tests__/env.spec.ts b/playground/env/__tests__/env.spec.ts
index 373e051a22a66e..f9955706101bb6 100644
--- a/playground/env/__tests__/env.spec.ts
+++ b/playground/env/__tests__/env.spec.ts
@@ -3,7 +3,7 @@ import { isBuild, page } from '~utils'
 const mode = isBuild ? `production` : `development`
 
 test('base', async () => {
-  expect(await page.textContent('.base')).toBe('/')
+  expect(await page.textContent('.base')).toBe('/env/')
 })
 
 test('mode', async () => {
@@ -46,9 +46,15 @@ test('env object', async () => {
     VITE_EFFECTIVE_MODE_FILE_NAME: `.env.${mode}`,
     CUSTOM_PREFIX_ENV_VARIABLE: '1',
     VITE_CUSTOM_ENV_VARIABLE: '1',
-    BASE_URL: '/',
+    BASE_URL: '/env/',
     MODE: mode,
     DEV: !isBuild,
     PROD: isBuild
   })
 })
+
+if (!isBuild) {
+  test('relative url import script return import.meta.url', async () => {
+    expect(await page.textContent('.url')).toMatch('/env/index.js')
+  })
+}
diff --git a/playground/env/index.html b/playground/env/index.html
index 3728b870b1df32..a7553eeb181f73 100644
--- a/playground/env/index.html
+++ b/playground/env/index.html
@@ -14,6 +14,7 @@ <h1>Environment Variables</h1>
 <p>import.meta.env.VITE_INLINE: <code class="inline"></code></p>
 <p>process.env.NODE_ENV: <code class="node-env"></code></p>
 <p>import.meta.env: <span class="pre env-object"></span></p>
+<p>import.meta.url: <span class="pre url"></span></p>
 
 <script type="module">
   text('.base', import.meta.env.BASE_URL)
@@ -31,6 +32,7 @@ <h1>Environment Variables</h1>
     document.querySelector(el).textContent = text
   }
 </script>
+<script type="module" src="./index.js"></script>
 
 <style>
   .pre {
diff --git a/playground/env/index.js b/playground/env/index.js
new file mode 100644
index 00000000000000..35e23fd0d2b924
--- /dev/null
+++ b/playground/env/index.js
@@ -0,0 +1,5 @@
+text('.url', import.meta.url)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
diff --git a/playground/env/vite.config.js b/playground/env/vite.config.js
index 9d6809cba8e39b..c96c8f84a321ef 100644
--- a/playground/env/vite.config.js
+++ b/playground/env/vite.config.js
@@ -1,5 +1,9 @@
 const { defineConfig } = require('vite')
 
 module.exports = defineConfig({
-  envPrefix: ['VITE_', 'CUSTOM_PREFIX_']
+  base: '/env/',
+  envPrefix: ['VITE_', 'CUSTOM_PREFIX_'],
+  build: {
+    outDir: 'dist/env'
+  }
 })
diff --git a/playground/hmr/tsconfig.json b/playground/hmr/tsconfig.json
index e920e674091b5e..b9fb7448b41d60 100644
--- a/playground/hmr/tsconfig.json
+++ b/playground/hmr/tsconfig.json
@@ -3,12 +3,12 @@
   "include": ["."],
   "exclude": ["**/dist/**", "**/__tests__/**"],
   "compilerOptions": {
-    "target": "es2019",
-    "module": "esnext",
+    "target": "ES2020",
+    "module": "ESNext",
     "outDir": "dist",
     "allowJs": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
     "baseUrl": ".",
     "jsx": "preserve",
     "types": ["vite/client", "node"]
diff --git a/playground/html/vite.config.js b/playground/html/vite.config.js
index bfe48675cbc18f..95820ca2c7cf1f 100644
--- a/playground/html/vite.config.js
+++ b/playground/html/vite.config.js
@@ -4,6 +4,7 @@ const { resolve } = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: './',
   build: {
     rollupOptions: {
       input: {
diff --git a/playground/legacy/__tests__/legacy.spec.ts b/playground/legacy/__tests__/legacy.spec.ts
index 489b410817c457..cbf44112b122c1 100644
--- a/playground/legacy/__tests__/legacy.spec.ts
+++ b/playground/legacy/__tests__/legacy.spec.ts
@@ -71,6 +71,12 @@ test('should load dynamic import with css', async () => {
 describe.runIf(isBuild)('build', () => {
   test('should generate correct manifest', async () => {
     const manifest = readManifest()
+    // legacy polyfill
+    expect(manifest['../../vite/legacy-polyfills-legacy']).toBeDefined()
+    expect(manifest['../../vite/legacy-polyfills-legacy'].src).toBe(
+      '../../vite/legacy-polyfills-legacy'
+    )
+    // modern polyfill
     expect(manifest['../../vite/legacy-polyfills']).toBeDefined()
     expect(manifest['../../vite/legacy-polyfills'].src).toBe(
       '../../vite/legacy-polyfills'
diff --git a/playground/legacy/vite.config-custom-filename.js b/playground/legacy/vite.config-custom-filename.js
index 9a96133b015588..d1aea865ef5581 100644
--- a/playground/legacy/vite.config-custom-filename.js
+++ b/playground/legacy/vite.config-custom-filename.js
@@ -1,7 +1,7 @@
 const legacy = require('@vitejs/plugin-legacy').default
 
 module.exports = {
-  plugins: [legacy()],
+  plugins: [legacy({ modernPolyfills: true })],
   build: {
     manifest: true,
     minify: false,
diff --git a/playground/legacy/vite.config.js b/playground/legacy/vite.config.js
index 90d3be7f7c56a0..c21813971716b5 100644
--- a/playground/legacy/vite.config.js
+++ b/playground/legacy/vite.config.js
@@ -3,9 +3,11 @@ const path = require('path')
 const legacy = require('@vitejs/plugin-legacy').default
 
 module.exports = {
+  base: './',
   plugins: [
     legacy({
-      targets: 'IE 11'
+      targets: 'IE 11',
+      modernPolyfills: true
     })
   ],
 
diff --git a/playground/optimize-missing-deps/__test__/serve.ts b/playground/optimize-missing-deps/__test__/serve.ts
index 0548ea6fa0c427..369dd8d47c23a4 100644
--- a/playground/optimize-missing-deps/__test__/serve.ts
+++ b/playground/optimize-missing-deps/__test__/serve.ts
@@ -2,13 +2,16 @@
 // the default e2e test serve behavior
 
 import path from 'path'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, ports, rootDir } from '~utils'
 
 export const port = ports['optimize-missing-deps']
 
 export async function serve() {
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(
+    rootDir,
+    hmrPorts['optimize-missing-deps']
+  )
 
   return new Promise((resolve, reject) => {
     try {
diff --git a/playground/optimize-missing-deps/server.js b/playground/optimize-missing-deps/server.js
index 03a6b4d4ef7969..5d16bde38d41ba 100644
--- a/playground/optimize-missing-deps/server.js
+++ b/playground/optimize-missing-deps/server.js
@@ -5,7 +5,7 @@ const express = require('express')
 
 const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
-async function createServer(root = process.cwd()) {
+async function createServer(root = process.cwd(), hmrPort) {
   const resolve = (p) => path.resolve(__dirname, p)
 
   const app = express()
@@ -16,7 +16,12 @@ async function createServer(root = process.cwd()) {
   const vite = await require('vite').createServer({
     root,
     logLevel: isTest ? 'error' : 'info',
-    server: { middlewareMode: 'ssr' }
+    server: {
+      middlewareMode: 'ssr',
+      hmr: {
+        port: hmrPort
+      }
+    }
   })
   app.use(vite.middlewares)
 
diff --git a/playground/preload/__tests__/preload.spec.ts b/playground/preload/__tests__/preload.spec.ts
index cb1d3557499946..bd172a60ce19cf 100644
--- a/playground/preload/__tests__/preload.spec.ts
+++ b/playground/preload/__tests__/preload.spec.ts
@@ -16,10 +16,10 @@ describe.runIf(isBuild)('build', () => {
     await page.goto(viteTestUrl + '/#/hello')
     const html = await page.content()
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="\/assets\/Hello\.\w{8}\.js"/
+      /link rel="modulepreload".*?href=".*?\/assets\/Hello\.\w{8}\.js"/
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="\/assets\/Hello\.\w{8}\.css"/
+      /link rel="stylesheet".*?href=".*?\/assets\/Hello\.\w{8}\.css"/
     )
   })
 })
diff --git a/playground/ssr-deps/__tests__/serve.ts b/playground/ssr-deps/__tests__/serve.ts
index 979ed64782dd9b..356131f36f374d 100644
--- a/playground/ssr-deps/__tests__/serve.ts
+++ b/playground/ssr-deps/__tests__/serve.ts
@@ -3,7 +3,7 @@
 
 import path from 'path'
 import kill from 'kill-port'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-deps']
 
@@ -11,7 +11,7 @@ export async function serve() {
   await kill(port)
 
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(rootDir, hmrPorts['ssr-deps'])
 
   return new Promise((resolve, reject) => {
     try {
diff --git a/playground/ssr-deps/server.js b/playground/ssr-deps/server.js
index 8ab5186e9dd582..975d6959d16a5c 100644
--- a/playground/ssr-deps/server.js
+++ b/playground/ssr-deps/server.js
@@ -5,10 +5,7 @@ const express = require('express')
 
 const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
-async function createServer(
-  root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production'
-) {
+async function createServer(root = process.cwd(), hmrPort) {
   const resolve = (p) => path.resolve(__dirname, p)
 
   const app = express()
@@ -26,6 +23,9 @@ async function createServer(
         // misses change events, so enforce polling for consistency
         usePolling: true,
         interval: 100
+      },
+      hmr: {
+        port: hmrPort
       }
     }
   })
diff --git a/playground/ssr-html/__tests__/serve.ts b/playground/ssr-html/__tests__/serve.ts
index 0740cce6cb456b..9f18771acd26d4 100644
--- a/playground/ssr-html/__tests__/serve.ts
+++ b/playground/ssr-html/__tests__/serve.ts
@@ -3,7 +3,7 @@
 
 import path from 'path'
 import kill from 'kill-port'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-html']
 
@@ -11,7 +11,7 @@ export async function serve() {
   await kill(port)
 
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(rootDir, hmrPorts['ssr-html'])
 
   return new Promise((resolve, reject) => {
     try {
diff --git a/playground/ssr-html/server.js b/playground/ssr-html/server.js
index a8557e2b7fff28..c94701afcfe771 100644
--- a/playground/ssr-html/server.js
+++ b/playground/ssr-html/server.js
@@ -22,10 +22,7 @@ const DYNAMIC_STYLES = `
   </style>
 `
 
-async function createServer(
-  root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production'
-) {
+async function createServer(root = process.cwd(), hmrPort) {
   const resolve = (p) => path.resolve(__dirname, p)
 
   const app = express()
@@ -44,6 +41,9 @@ async function createServer(
         // misses change events, so enforce polling for consistency
         usePolling: true,
         interval: 100
+      },
+      hmr: {
+        port: hmrPort
       }
     }
   })
diff --git a/playground/ssr-pug/__tests__/serve.ts b/playground/ssr-pug/__tests__/serve.ts
index bfaba4ce89d47c..7f25677af410a3 100644
--- a/playground/ssr-pug/__tests__/serve.ts
+++ b/playground/ssr-pug/__tests__/serve.ts
@@ -3,7 +3,7 @@
 
 import path from 'path'
 import kill from 'kill-port'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-pug']
 
@@ -11,7 +11,7 @@ export async function serve() {
   await kill(port)
 
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(rootDir, hmrPorts['ssr-pug'])
 
   return new Promise((resolve, reject) => {
     try {
diff --git a/playground/ssr-pug/server.js b/playground/ssr-pug/server.js
index f9753ce496b283..2a3b48e5604b85 100644
--- a/playground/ssr-pug/server.js
+++ b/playground/ssr-pug/server.js
@@ -14,10 +14,7 @@ const DYNAMIC_SCRIPTS = `
   <script type="module" src="/src/app.js"></script>
 `
 
-async function createServer(
-  root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production'
-) {
+async function createServer(root = process.cwd(), hmrPort) {
   const resolve = (p) => path.resolve(__dirname, p)
 
   const app = express()
@@ -36,6 +33,9 @@ async function createServer(
         // misses change events, so enforce polling for consistency
         usePolling: true,
         interval: 100
+      },
+      hmr: {
+        port: hmrPort
       }
     }
   })
diff --git a/playground/ssr-react/__tests__/serve.ts b/playground/ssr-react/__tests__/serve.ts
index b022cb84755089..21bcf61863e92f 100644
--- a/playground/ssr-react/__tests__/serve.ts
+++ b/playground/ssr-react/__tests__/serve.ts
@@ -3,7 +3,7 @@
 
 import path from 'path'
 import kill from 'kill-port'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, isBuild, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-react']
 
@@ -37,7 +37,11 @@ export async function serve() {
   await kill(port)
 
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(
+    rootDir,
+    isBuild,
+    hmrPorts['ssr-react']
+  )
 
   return new Promise((resolve, reject) => {
     try {
diff --git a/playground/ssr-react/server.js b/playground/ssr-react/server.js
index e9605f80e2d331..2c36d0ec5add43 100644
--- a/playground/ssr-react/server.js
+++ b/playground/ssr-react/server.js
@@ -9,7 +9,8 @@ process.env.MY_CUSTOM_SECRET = 'API_KEY_qwertyuiop'
 
 async function createServer(
   root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production'
+  isProd = process.env.NODE_ENV === 'production',
+  hmrPort
 ) {
   const resolve = (p) => path.resolve(__dirname, p)
 
@@ -34,6 +35,9 @@ async function createServer(
           // misses change events, so enforce polling for consistency
           usePolling: true,
           interval: 100
+        },
+        hmr: {
+          port: hmrPort
         }
       }
     })
diff --git a/playground/ssr-vue/__tests__/serve.ts b/playground/ssr-vue/__tests__/serve.ts
index 301d62adda9a42..c00a0359c5cd74 100644
--- a/playground/ssr-vue/__tests__/serve.ts
+++ b/playground/ssr-vue/__tests__/serve.ts
@@ -3,7 +3,7 @@
 
 import path from 'path'
 import kill from 'kill-port'
-import { isBuild, ports, rootDir } from '~utils'
+import { hmrPorts, isBuild, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-vue']
 
@@ -37,7 +37,11 @@ export async function serve() {
   await kill(port)
 
   const { createServer } = require(path.resolve(rootDir, 'server.js'))
-  const { app, vite } = await createServer(rootDir, isBuild)
+  const { app, vite } = await createServer(
+    rootDir,
+    isBuild,
+    hmrPorts['ssr-vue']
+  )
 
   return new Promise((resolve, reject) => {
     try {
diff --git a/playground/ssr-vue/server.js b/playground/ssr-vue/server.js
index d23aaf62f4a474..a626f8299be022 100644
--- a/playground/ssr-vue/server.js
+++ b/playground/ssr-vue/server.js
@@ -7,7 +7,8 @@ const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
 async function createServer(
   root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production'
+  isProd = process.env.NODE_ENV === 'production',
+  hmrPort
 ) {
   const resolve = (p) => path.resolve(__dirname, p)
 
@@ -37,6 +38,9 @@ async function createServer(
           // misses change events, so enforce polling for consistency
           usePolling: true,
           interval: 100
+        },
+        hmr: {
+          port: hmrPort
         }
       }
     })
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
index 987ecb5e950a23..2e0eafeda4191e 100644
--- a/playground/test-utils.ts
+++ b/playground/test-utils.ts
@@ -34,6 +34,14 @@ export const ports = {
   'css/postcss-caching': 5005,
   'css/postcss-plugins-different-dir': 5006
 }
+export const hmrPorts = {
+  'optimize-missing-deps': 24680,
+  'ssr-deps': 24681,
+  'ssr-html': 24682,
+  'ssr-pug': 24683,
+  'ssr-react': 24684,
+  'ssr-vue': 24685
+}
 
 const hexToNameMap: Record<string, string> = {}
 Object.keys(colors).forEach((color) => {
@@ -114,8 +122,12 @@ export function listAssets(base = ''): string[] {
   return fs.readdirSync(assetsDir)
 }
 
-export function findAssetFile(match: string | RegExp, base = ''): string {
-  const assetsDir = path.join(testDir, 'dist', base, 'assets')
+export function findAssetFile(
+  match: string | RegExp,
+  base = '',
+  assets = 'assets'
+): string {
+  const assetsDir = path.join(testDir, 'dist', base, assets)
   const files = fs.readdirSync(assetsDir)
   const file = files.find((file) => {
     return file.match(match)
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index ada2a60bff6cff..cbf237ee6d4653 100644
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -2,14 +2,14 @@
   "include": ["."],
   "exclude": ["**/dist/**"],
   "compilerOptions": {
-    "target": "es2019",
-    "module": "esnext",
+    "target": "ES2020",
+    "module": "ESNext",
     "outDir": "dist",
     "baseUrl": ".",
     "allowJs": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
     "skipLibCheck": true,
     "noUnusedLocals": true,
     "jsx": "preserve",
diff --git a/playground/vitestSetup.ts b/playground/vitestSetup.ts
index 9c1840b68ffd0a..660abc9307b848 100644
--- a/playground/vitestSetup.ts
+++ b/playground/vitestSetup.ts
@@ -54,6 +54,8 @@ export const serverLogs: string[] = []
 export const browserLogs: string[] = []
 export const browserErrors: Error[] = []
 
+export let resolvedConfig: ResolvedConfig = undefined!
+
 export let page: Page = undefined!
 export let browser: Browser = undefined!
 export let viteTestUrl: string = ''
@@ -199,7 +201,6 @@ export async function startDefaultServe() {
   } else {
     process.env.VITE_INLINE = 'inline-build'
     // determine build watch
-    let resolvedConfig: ResolvedConfig
     const resolvedPlugin: () => PluginOption = () => ({
       name: 'vite-plugin-watcher',
       configResolved(config) {
@@ -229,7 +230,10 @@ function startStaticServer(config?: InlineConfig): Promise<string> {
   }
 
   // fallback internal base to ''
-  const base = (config?.base ?? '/') === '/' ? '' : config?.base ?? ''
+  let base = config?.base
+  if (!base || base === '/' || base === './') {
+    base = ''
+  }
 
   // @ts-ignore
   if (config && config.__test__) {
diff --git a/playground/vue-server-origin/Main.vue b/playground/vue-server-origin/Main.vue
new file mode 100644
index 00000000000000..20e736542ec9cb
--- /dev/null
+++ b/playground/vue-server-origin/Main.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import asset from './assets/asset.png'
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/asset.png" />
+  <img alt="Vue logo" :src="asset" />
+</template>
diff --git a/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts b/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
new file mode 100644
index 00000000000000..042105721f2615
--- /dev/null
+++ b/playground/vue-server-origin/__tests__/vue-server-origin.spec.ts
@@ -0,0 +1,10 @@
+import { isBuild, page } from '~utils'
+
+test('should render', async () => {
+  const expected = isBuild
+    ? /assets\/asset\.[0-9a-f]+\.png/
+    : /https:\/\/vue-server-origin\.test\/assets\/asset\.png/
+
+  expect(await page.getAttribute('img', 'src')).toMatch(expected)
+  expect(await page.getAttribute('img:nth-child(2)', 'src')).toMatch(expected)
+})
diff --git a/playground/vue-server-origin/assets/asset.png b/playground/vue-server-origin/assets/asset.png
new file mode 100644
index 00000000000000..1b3356a746b8bb
Binary files /dev/null and b/playground/vue-server-origin/assets/asset.png differ
diff --git a/playground/vue-server-origin/env.d.ts b/playground/vue-server-origin/env.d.ts
new file mode 100644
index 00000000000000..31dca6bb40c906
--- /dev/null
+++ b/playground/vue-server-origin/env.d.ts
@@ -0,0 +1 @@
+declare module '*.png'
diff --git a/playground/vue-server-origin/index.html b/playground/vue-server-origin/index.html
new file mode 100644
index 00000000000000..13de0b72c23782
--- /dev/null
+++ b/playground/vue-server-origin/index.html
@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp, defineCustomElement } from 'vue'
+  import Main from './Main.vue'
+
+  createApp(Main).mount('#app')
+</script>
diff --git a/playground/vue-server-origin/package.json b/playground/vue-server-origin/package.json
new file mode 100644
index 00000000000000..869de55c22ee3d
--- /dev/null
+++ b/playground/vue-server-origin/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "test-vue-server-origin",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*"
+  }
+}
diff --git a/playground/vue-server-origin/vite.config.ts b/playground/vue-server-origin/vite.config.ts
new file mode 100644
index 00000000000000..46c00e4c5c16a8
--- /dev/null
+++ b/playground/vue-server-origin/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  base: '',
+  resolve: {
+    alias: {
+      '@': __dirname
+    }
+  },
+  plugins: [vuePlugin()],
+  server: {
+    origin: 'https://vue-server-origin.test'
+  },
+  build: {
+    // to make tests faster
+    minify: false
+  }
+})
diff --git a/playground/wasm/__tests__/wasm.spec.ts b/playground/wasm/__tests__/wasm.spec.ts
index 9a23378ecbf8dc..ad4438992609f9 100644
--- a/playground/wasm/__tests__/wasm.spec.ts
+++ b/playground/wasm/__tests__/wasm.spec.ts
@@ -1,4 +1,4 @@
-import { page, untilUpdated } from '~utils'
+import { isBuild, page, untilUpdated } from '~utils'
 
 test('should work when inlined', async () => {
   await page.click('.inline-wasm .run')
@@ -10,6 +10,20 @@ test('should work when output', async () => {
   await untilUpdated(() => page.textContent('.output-wasm .result'), '24')
 })
 
+test('init function returns WebAssembly.Instance', async () => {
+  await page.click('.init-returns-instance .run')
+  await untilUpdated(
+    () => page.textContent('.init-returns-instance .result'),
+    'true'
+  )
+})
+
+test('?url', async () => {
+  expect(await page.textContent('.url')).toMatch(
+    isBuild ? 'data:application/wasm' : '/light.wasm'
+  )
+})
+
 test('should work when wasm in worker', async () => {
   await untilUpdated(() => page.textContent('.worker-wasm .result'), '3')
 })
diff --git a/playground/wasm/index.html b/playground/wasm/index.html
index ecb0b66e913fbb..2af0fda6847f2f 100644
--- a/playground/wasm/index.html
+++ b/playground/wasm/index.html
@@ -12,14 +12,25 @@ <h3>When wasm is output, result should be 24</h3>
   <span class="result"></span>
 </div>
 
+<div class="init-returns-instance">
+  <h3>init function returns WebAssembly.Instance</h3>
+  <button class="run">Click to run</button>
+  <span class="result"></span>
+</div>
+
+<div>
+  <h3>Importing as URL</h3>
+  <span class="url"></span>
+</div>
+
 <div class="worker-wasm">
   <h3>worker wasm</h3>
   <span class="result"></span>
 </div>
 
 <script type="module">
-  import light from './light.wasm'
-  import heavy from './heavy.wasm'
+  import light from './light.wasm?init'
+  import heavy from './heavy.wasm?init'
   import myWorker from './worker?worker'
 
   const w = new myWorker()
@@ -32,7 +43,7 @@ <h3>worker wasm</h3>
       imports: {
         imported_func: (res) => (resultElement.textContent = res)
       }
-    })
+    }).then((i) => i.exports)
     exported_func()
   }
 
@@ -51,4 +62,21 @@ <h3>worker wasm</h3>
     .addEventListener('click', async () =>
       testWasm(heavy, document.querySelector('.output-wasm .result'))
     )
+
+  document
+    .querySelector('.init-returns-instance .run')
+    .addEventListener('click', async () => {
+      const res = await light({
+        imports: {
+          imported_func: (res) => (resultElement.textContent = res)
+        }
+      })
+      text(
+        '.init-returns-instance .result',
+        res instanceof WebAssembly.Instance
+      )
+    })
+
+  import lightUrl from './light.wasm?url'
+  text('.url', lightUrl)
 </script>
diff --git a/playground/wasm/worker.js b/playground/wasm/worker.js
index a483865bd42bff..dbbc0640226406 100644
--- a/playground/wasm/worker.js
+++ b/playground/wasm/worker.js
@@ -1,5 +1,5 @@
-import init from './add.wasm'
-init().then((exports) => {
+import init from './add.wasm?init'
+init().then(({ exports }) => {
   // eslint-disable-next-line no-undef
   self.postMessage({ result: exports.add(1, 2) })
 })
diff --git a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
new file mode 100644
index 00000000000000..90c1e55798b51f
--- /dev/null
+++ b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
@@ -0,0 +1,126 @@
+import fs from 'fs'
+import path from 'path'
+import type { Page } from 'playwright-chromium'
+import { isBuild, page, testDir, untilUpdated } from '~utils'
+
+test('normal', async () => {
+  await page.click('.ping')
+  await untilUpdated(() => page.textContent('.pong'), 'pong')
+  await untilUpdated(
+    () => page.textContent('.mode'),
+    isBuild ? 'production' : 'development'
+  )
+  await untilUpdated(
+    () => page.textContent('.bundle-with-plugin'),
+    'worker bundle with plugin success!'
+  )
+})
+
+test('TS output', async () => {
+  await page.click('.ping-ts-output')
+  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong')
+})
+
+test('inlined', async () => {
+  await page.click('.ping-inline')
+  await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
+})
+
+const waitSharedWorkerTick = (
+  (resolvedSharedWorkerCount: number) => async (page: Page) => {
+    await untilUpdated(async () => {
+      const count = await page.textContent('.tick-count')
+      // ignore the initial 0
+      return count === '1' ? 'page loaded' : ''
+    }, 'page loaded')
+    // test.concurrent sequential is not guaranteed
+    // force page to wait to ensure two pages overlap in time
+    resolvedSharedWorkerCount++
+    if (resolvedSharedWorkerCount < 2) return
+
+    await untilUpdated(() => {
+      return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : ''
+    }, 'all pages loaded')
+  }
+)(0)
+
+test.each([[true], [false]])('shared worker', async (doTick) => {
+  if (doTick) {
+    await page.click('.tick-shared')
+  }
+  await waitSharedWorkerTick(page)
+})
+
+test('worker emitted and import.meta.url in nested worker (serve)', async () => {
+  expect(await page.textContent('.nested-worker')).toMatch(
+    'worker-nested-worker'
+  )
+  expect(await page.textContent('.nested-worker-module')).toMatch('sub-worker')
+  expect(await page.textContent('.nested-worker-constructor')).toMatch(
+    '"type":"constructor"'
+  )
+})
+
+describe.runIf(isBuild)('build', () => {
+  // assert correct files
+  test('inlined code generation', async () => {
+    const chunksDir = path.resolve(testDir, 'dist/chunks')
+    const files = fs.readdirSync(chunksDir)
+    const index = files.find((f) => f.includes('main-module'))
+    const content = fs.readFileSync(path.resolve(chunksDir, index), 'utf-8')
+    const workerEntriesDir = path.resolve(testDir, 'dist/worker-entries')
+    const workerFiles = fs.readdirSync(workerEntriesDir)
+    const worker = workerFiles.find((f) => f.includes('worker_entry.my-worker'))
+    const workerContent = fs.readFileSync(
+      path.resolve(workerEntriesDir, worker),
+      'utf-8'
+    )
+
+    // worker should have all imports resolved and no exports
+    expect(workerContent).not.toMatch(`import`)
+    expect(workerContent).not.toMatch(`export`)
+    // chunk
+    expect(content).toMatch(`new Worker("../worker-entries/`)
+    expect(content).toMatch(`new SharedWorker("../worker-entries/`)
+    // inlined
+    expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
+    expect(content).toMatch(`window.Blob`)
+  })
+
+  test('worker emitted and import.meta.url in nested worker (build)', async () => {
+    expect(await page.textContent('.nested-worker-module')).toMatch(
+      '"type":"module"'
+    )
+    expect(await page.textContent('.nested-worker-constructor')).toMatch(
+      '"type":"constructor"'
+    )
+  })
+})
+
+test('module worker', async () => {
+  expect(await page.textContent('.shared-worker-import-meta-url')).toMatch(
+    'A string'
+  )
+})
+
+test.runIf(isBuild)('classic worker', async () => {
+  expect(await page.textContent('.classic-worker')).toMatch('A classic')
+  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+})
+
+test.runIf(isBuild)('emit chunk', async () => {
+  expect(await page.textContent('.emit-chunk-worker')).toMatch(
+    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
+  )
+  expect(await page.textContent('.emit-chunk-dynamic-import-worker')).toMatch(
+    '"A string./"'
+  )
+})
+
+test('import.meta.glob in worker', async () => {
+  expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
+})
+
+test('import.meta.glob with eager in worker', async () => {
+  expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
+})
diff --git a/playground/worker/__tests__/relative-base/vite.config.js b/playground/worker/__tests__/relative-base/vite.config.js
new file mode 100644
index 00000000000000..6837b8ef975a3d
--- /dev/null
+++ b/playground/worker/__tests__/relative-base/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-relative-base')
diff --git a/playground/worker/classic-shared-worker.js b/playground/worker/classic-shared-worker.js
index e629208f05cf0a..eed61e028f1e01 100644
--- a/playground/worker/classic-shared-worker.js
+++ b/playground/worker/classic-shared-worker.js
@@ -1,4 +1,7 @@
-importScripts(`/${self.location.pathname.split('/')[1]}/classic.js`)
+let base = `/${self.location.pathname.split('/')[1]}`
+if (base === `/worker-entries`) base = '' // relative base
+
+importScripts(`${base}/classic.js`)
 
 self.onconnect = (event) => {
   const port = event.ports[0]
diff --git a/playground/worker/classic-worker.js b/playground/worker/classic-worker.js
index 238857acf00a58..55486818a8ada7 100644
--- a/playground/worker/classic-worker.js
+++ b/playground/worker/classic-worker.js
@@ -1,4 +1,7 @@
-importScripts(`/${self.location.pathname.split("/")[1]}/classic.js`)
+let base = `/${self.location.pathname.split('/')[1]}`
+if (base === `/worker-entries`) base = '' // relative base
+
+importScripts(`${base}/classic.js`)
 
 self.addEventListener('message', () => {
   self.postMessage(self.constant)
diff --git a/playground/worker/package.json b/playground/worker/package.json
index 52cdac8c27c051..d66a96e84d59f2 100644
--- a/playground/worker/package.json
+++ b/playground/worker/package.json
@@ -18,6 +18,9 @@
     "dev:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js dev",
     "build:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js build",
     "preview:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js preview",
+    "dev:relative-base": "cross-env WORKER_MODE=inline vite --config ./vite.config-relative-base.js dev",
+    "build:relative-base": "cross-env WORKER_MODE=inline vite --config ./vite.config-relative-base.js build",
+    "preview:relative-base": "cross-env WORKER_MODE=inline vite --config ./vite.config-relative-base.js preview",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite"
   },
   "devDependencies": {
diff --git a/playground/worker/vite.config-relative-base.js b/playground/worker/vite.config-relative-base.js
new file mode 100644
index 00000000000000..dd10caa205f60b
--- /dev/null
+++ b/playground/worker/vite.config-relative-base.js
@@ -0,0 +1,42 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+const path = require('path')
+
+module.exports = vite.defineConfig({
+  base: './',
+  enforce: 'pre',
+  worker: {
+    format: 'es',
+    plugins: [vueJsx()],
+    rollupOptions: {
+      output: {
+        assetFileNames: 'worker-assets/worker_asset.[name]-[hash].[ext]',
+        chunkFileNames: 'worker-chunks/worker_chunk.[name]-[hash].js',
+        entryFileNames: 'worker-entries/worker_entry.[name]-[hash].js'
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      output: {
+        assetFileNames: 'other-assets/[name]-[hash].[ext]',
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        entryFileNames: 'entries/[name]-[hash].js'
+      }
+    }
+  },
+  plugins: [
+    {
+      name: 'resolve-format-es',
+      transform(code, id) {
+        if (id.includes('main.js')) {
+          return code.replace(
+            `/* flag: will replace in vite config import("./format-es.js") */`,
+            `import("./main-format-es")`
+          )
+        }
+      }
+    }
+  ]
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c9e2f58cd9789..2831a1dfd11d23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,7 @@ importers:
       npm-run-all: ^4.1.5
       picocolors: ^1.0.0
       playwright-chromium: ^1.21.1
+      pnpm: ^7.1.2
       prettier: 2.6.2
       prompts: ^2.4.2
       rimraf: ^3.0.2
@@ -60,7 +61,7 @@ importers:
       typescript: ^4.6.4
       unbuild: ^0.7.4
       vite: workspace:*
-      vitepress: ^0.22.4
+      vitepress: 1.0.0-draft.1
       vitest: ^0.12.4
       vue: ^3.2.33
     devDependencies:
@@ -103,6 +104,7 @@ importers:
       npm-run-all: 4.1.5
       picocolors: 1.0.0
       playwright-chromium: 1.21.1
+      pnpm: 7.1.2
       prettier: 2.6.2
       prompts: 2.4.2
       rimraf: 3.0.2
@@ -114,7 +116,7 @@ importers:
       typescript: 4.6.4
       unbuild: 0.7.4
       vite: link:packages/vite
-      vitepress: 0.22.4
+      vitepress: 1.0.0-draft.1
       vitest: 0.12.4
       vue: 3.2.33
 
@@ -979,6 +981,15 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue': link:../../packages/plugin-vue
 
+  playground/vue-server-origin:
+    specifiers:
+      '@vitejs/plugin-vue': workspace:*
+      vue: ^3.2.25
+    dependencies:
+      vue: 3.2.33
+    devDependencies:
+      '@vitejs/plugin-vue': link:../../packages/plugin-vue
+
   playground/vue-sourcemap:
     specifiers:
       '@vitejs/plugin-vue': workspace:*
@@ -2359,6 +2370,42 @@ packages:
   /@vue/shared/3.2.33:
     resolution: {integrity: sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==}
 
+  /@vueuse/core/8.5.0_vue@3.2.33:
+    resolution: {integrity: sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@vueuse/metadata': 8.5.0
+      '@vueuse/shared': 8.5.0_vue@3.2.33
+      vue: 3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+    dev: true
+
+  /@vueuse/metadata/8.5.0:
+    resolution: {integrity: sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g==}
+    dev: true
+
+  /@vueuse/shared/8.5.0_vue@3.2.33:
+    resolution: {integrity: sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+    dev: true
+
   /@wessberg/stringutil/1.0.19:
     resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==}
     engines: {node: '>=8.0.0'}
@@ -2698,6 +2745,10 @@ packages:
       - supports-color
     dev: true
 
+  /body-scroll-lock/4.0.0-beta.0:
+    resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
+    dev: true
+
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -6408,6 +6459,12 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
+  /pnpm/7.1.2:
+    resolution: {integrity: sha512-nZieltHsIEvr5vGcDM4JchBixUk1Esq+XewDP9RCiPAPxRv5LzDhGujgsrtoETyXBsQ9mclXSPppNr80ya4Rnw==}
+    engines: {node: '>=14.19'}
+    hasBin: true
+    dev: true
+
   /postcss-import/14.1.0_postcss@8.4.13:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -8289,20 +8346,23 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vitepress/0.22.4:
-    resolution: {integrity: sha512-oZUnLO/SpYdThaBKefDeOiVlr0Rie4Ppx3FzMnMyLtJnI5GlBMNjqYqMy/4+umm/iC+ZDJfI+IlDKxv5fZnYzA==}
+  /vitepress/1.0.0-draft.1:
+    resolution: {integrity: sha512-9tNpUu0dwd5w5DNCBlgsmw4HlEl55o8jdOk/tQIxQ2j//0UkEAPT32TL5KRuro1Bp5OM6njZ37s8Y8g26MnooQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.0.0
       '@docsearch/js': 3.0.0
       '@vitejs/plugin-vue': link:packages/plugin-vue
+      '@vueuse/core': 8.5.0_vue@3.2.33
+      body-scroll-lock: 4.0.0-beta.0
       prismjs: 1.28.0
       vite: link:packages/vite
       vue: 3.2.33
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
+      - '@vue/composition-api'
       - react
       - react-dom
     dev: true
@@ -8340,6 +8400,21 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /vue-demi/0.12.5_vue@3.2.33:
+    resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.33
+    dev: true
+
   /vue-router/4.0.15_vue@3.2.33:
     resolution: {integrity: sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==}
     peerDependencies:
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
index 92cbe98fb03740..3c25c197e231b4 100644
--- a/scripts/tsconfig.json
+++ b/scripts/tsconfig.json
@@ -2,9 +2,9 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "include": ["."],
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es2019",
-    "moduleResolution": "node",
+    "module": "CommonJS",
+    "target": "ES2020",
+    "moduleResolution": "Node",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
diff --git a/vitest.config.e2e.ts b/vitest.config.e2e.ts
index 76a98a9a1d366f..9539997c4a14ba 100644
--- a/vitest.config.e2e.ts
+++ b/vitest.config.e2e.ts
@@ -20,9 +20,7 @@ export default defineConfig({
     onConsoleLog(log) {
       if (log.match(/experimental|jit engine|emitted file|tailwind/i))
         return false
-    },
-    maxThreads: process.env.CI ? 1 : undefined,
-    minThreads: process.env.CI ? 1 : undefined
+    }
   },
   esbuild: {
     target: 'node14'