feat: support base option during dev, deprecate build.base (#1556)

Author: bompus

docs/config/index.md

@@ -98,6 +98,13 @@ export default ({ command, mode }) => {
 
   See [Project Root](/guide/#project-root) for more details.
 
+### base
+
+- **Type:** `string`
+- **Default:** `/`
+
+  Base public path when served in development or production. Note the path should start and end with `/`. See [Public Base Path](/guide/build#public-base-path) for more details.
+
 ### mode
 
 - **Type:** `string`
@@ -322,13 +329,6 @@ export default ({ command, mode }) => {
 
 ## Build Options
 
-### build.base
-
-- **Type:** `string`
-- **Default:** `/`
-
-  Base public path when served in production. Note the path should start and end with `/`. See [Public Base Path](/guide/build#public-base-path) for more details.
-
 ### build.target
 
 - **Type:** `string`

docs/guide/build.md

@@ -23,7 +23,7 @@ Legacy browsers can be supported via [@vitejs/plugin-legacy](https://github.com/
 
 - Related: [Asset Handling](./features#asset-handling)
 
-If you are deploying your project under a nested public path, simply specify the [`build.base` config option](/config/#build-base) and all asset paths will be rewritten accordingly. This option can also be specified as a command line flag, e.g. `vite build --base=/my/public/path/`.
+If you are deploying your project under a nested public path, simply specify the [`base` config option](/config/#base) and all asset paths will be rewritten accordingly. This option can also be specified as a command line flag, e.g. `vite build --base=/my/public/path/`.
 
 JS-imported asset URLs, CSS `url()` references, and asset references in your `.html` files are all automatically adjusted to respect this option during build.
 

docs/guide/env-and-mode.md

@@ -6,7 +6,7 @@ Vite exposes env variables on the special **`import.meta.env`** object. Some bui
 
 - **`import.meta.env.MODE`**: {string} the [mode](#modes) the app is running in.
 
-- **`import.meta.env.BASE_URL`**: {string} the base url the app is being served from. In development, this is always `/`. In production, this is determined by the [`build.base` config option](/config/#build-base).
+- **`import.meta.env.BASE_URL`**: {string} the base url the app is being served from. This is determined by the [`base` config option](/config/#base).
 
 - **`import.meta.env.PROD`**: {boolean} whether the app is running in production.
 

packages/playground/assets/__tests__/assets.spec.ts

@@ -10,16 +10,40 @@ import {
 
 const assetMatch = isBuild
   ? /\/foo\/assets\/asset\.\w{8}\.png/
-  : '/nested/asset.png'
+  : '/foo/nested/asset.png'
 
-const iconMatch = isBuild ? `/foo/icon.png` : `icon.png`
+const iconMatch = `/foo/icon.png`
 
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
     expect(msg).not.toMatch('404')
   })
 })
 
+describe('injected scripts', () => {
+  test('@vite/client', async () => {
+    const hasClient = await page.$(
+      'script[type="module"][src="/foo/@vite/client"]'
+    )
+    if (isBuild) {
+      expect(hasClient).toBeFalsy()
+    } else {
+      expect(hasClient).toBeTruthy()
+    }
+  })
+
+  test('html-proxy', async () => {
+    const hasHtmlProxy = await page.$(
+      'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
+    )
+    if (isBuild) {
+      expect(hasHtmlProxy).toBeFalsy()
+    } else {
+      expect(hasHtmlProxy).toBeTruthy()
+    }
+  })
+})
+
 describe('raw references from /public', () => {
   test('load raw js from /public', async () => {
     expect(await page.textContent('.raw-js')).toMatch('[success]')
@@ -70,7 +94,7 @@ describe('css url() references', () => {
   })
 
   test('base64 inline', async () => {
-    const match = isBuild ? `data:image/png;base64` : `/icon.png`
+    const match = isBuild ? `data:image/png;base64` : `/foo/nested/icon.png`
     expect(await getBg('.css-url-base64-inline')).toMatch(match)
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
   })

packages/playground/assets/vite.config.js

@@ -2,8 +2,8 @@
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: '/foo/',
   build: {
-    base: '/foo/',
     outDir: 'dist/foo'
   }
 }

packages/plugin-legacy/index.js

@@ -265,7 +265,7 @@ function viteLegacyPlugin(options = {}) {
           tag: 'script',
           attrs: {
             type: 'module',
-            src: `${config.build.base}${modernPolyfillFilename}`
+            src: `${config.base}${modernPolyfillFilename}`
           }
         })
       } else if (modernPolyfills.size) {
@@ -295,7 +295,7 @@ function viteLegacyPlugin(options = {}) {
           tag: 'script',
           attrs: {
             nomodule: true,
-            src: `${config.build.base}${legacyPolyfillFilename}`
+            src: `${config.base}${legacyPolyfillFilename}`
           },
           injectTo: 'body'
         })
@@ -318,7 +318,7 @@ function viteLegacyPlugin(options = {}) {
             // script content will stay consistent - which allows using a constant
             // hash value for CSP.
             id: legacyEntryId,
-            'data-src': config.build.base + legacyEntryFilename
+            'data-src': config.base + legacyEntryFilename
           },
           children: systemJSInlineCode,
           injectTo: 'body'

packages/plugin-vue/src/template.ts

@@ -108,7 +108,9 @@ export function resolveTemplateCompilerOptions(
     // request
     if (filename.startsWith(options.root)) {
       assetUrlOptions = {
-        base: '/' + slash(path.relative(options.root, path.dirname(filename)))
+        base:
+          options.devServer.config.base +
+          slash(path.relative(options.root, path.dirname(filename)))
       }
     }
   } else {

packages/vite/src/client/client.ts

@@ -3,6 +3,7 @@ import { ErrorOverlay, overlayId } from './overlay'
 
 // injected by the hmr plugin when served
 declare const __ROOT__: string
+declare const __BASE__: string
 declare const __MODE__: string
 declare const __DEFINES__: Record<string, any>
 declare const __HMR_PROTOCOL__: string
@@ -38,6 +39,8 @@ 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 baseNoSlash = base.replace(/\/$/, '')
 
 function warnFailedFetch(err: Error, path: string | string[]) {
   if (!err.message.match('fetch')) {
@@ -107,9 +110,10 @@ async function handleMessage(payload: HMRPayload) {
         // if html file is edited, only reload the page if the browser is
         // currently on that page.
         const pagePath = location.pathname
+        const payloadPath = baseNoSlash + payload.path
         if (
-          pagePath === payload.path ||
-          (pagePath.endsWith('/') && pagePath + 'index.html' === payload.path)
+          pagePath === payloadPath ||
+          (pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath)
         ) {
           location.reload()
         }
@@ -259,6 +263,9 @@ export function removeStyle(id: string) {
 }
 
 async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
+  path = baseNoSlash + path
+  acceptedPath = baseNoSlash + acceptedPath
+
   const mod = hotModulesMap.get(path)
   if (!mod) {
     // In a code-splitting project,

packages/vite/src/node/build.ts

@@ -34,7 +34,7 @@ import { ssrManifestPlugin } from './ssr/ssrManifestPlugin'
 export interface BuildOptions {
   /**
    * Base public path when served in production.
-   * @default '/'
+   * @deprecated `base` is now a root-level config option.
    */
   base?: string
   /**
@@ -168,11 +168,10 @@ export interface LibraryOptions {
 
 export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife'
 
-export function resolveBuildOptions(
-  raw?: BuildOptions
-): Required<BuildOptions> {
-  const resolved: Required<BuildOptions> = {
-    base: '/',
+export type ResolvedBuildOptions = Required<Omit<BuildOptions, 'base'>>
+
+export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
+  const resolved: ResolvedBuildOptions = {
     target: 'modules',
     polyfillDynamicImport: raw?.target !== 'esnext' && !raw?.lib,
     outDir: 'dist',
@@ -207,9 +206,6 @@ export function resolveBuildOptions(
     resolved.target = 'es2019'
   }
 
-  // ensure base ending slash
-  resolved.base = resolved.base.replace(/([^/])$/, '$1/')
-
   // normalize false string into actual false
   if ((resolved.minify as any) === 'false') {
     resolved.minify = false

packages/vite/src/node/cli.ts

@@ -17,6 +17,7 @@ interface GlobalCLIOptions {
   config?: string
   c?: boolean | string
   root?: string
+  base?: string
   r?: string
   mode?: string
   m?: string
@@ -38,6 +39,7 @@ function cleanOptions(options: GlobalCLIOptions) {
   delete ret.config
   delete ret.c
   delete ret.root
+  delete ret.base
   delete ret.r
   delete ret.mode
   delete ret.m
@@ -50,6 +52,7 @@ function cleanOptions(options: GlobalCLIOptions) {
 cli
   .option('-c, --config <file>', `[string] use specified config file`)
   .option('-r, --root <path>', `[string] use specified root directory`)
+  .option('--base <path>', `[string] public base path (default: /)`)
   .option('-l, --logLevel <level>', `[string] silent | error | warn | all`)
   .option('--clearScreen', `[boolean] allow/disable clear screen when logging`)
   .option('-d, --debug [feat]', `[string | boolean] show debug logs`)
@@ -77,6 +80,7 @@ cli
     try {
       const server = await createServer({
         root,
+        base: options.base,
         mode: options.mode,
         configFile: options.config,
         logLevel: options.logLevel,
@@ -95,7 +99,6 @@ cli
 // build
 cli
   .command('build [root]')
-  .option('--base <path>', `[string] public base path (default: /)`)
   .option('--target <target>', `[string] transpile target (default: 'modules')`)
   .option('--outDir <dir>', `[string] output directory (default: dist)`)
   .option(
@@ -141,6 +144,7 @@ cli
     try {
       await build({
         root,
+        base: options.base,
         mode: options.mode,
         configFile: options.config,
         logLevel: options.logLevel,
@@ -169,6 +173,7 @@ cli
         const config = await resolveConfig(
           {
             root,
+            base: options.base,
             configFile: options.config,
             logLevel: options.logLevel
           },

packages/vite/src/node/config.ts

@@ -22,6 +22,7 @@ import { resolvePlugin } from './plugins/resolve'
 import { createLogger, Logger, LogLevel } from './logger'
 import { DepOptimizationOptions } from './optimizer'
 import { createFilter } from '@rollup/pluginutils'
+import { ResolvedBuildOptions } from '.'
 
 const debug = createDebugger('vite:config')
 
@@ -112,6 +113,11 @@ export interface UserConfig {
    * Default: true
    */
   clearScreen?: boolean
+  /**
+   * Base public path when served in development or production.
+   * @default '/'
+   */
+  base?: string
 }
 
 export interface SSROptions {
@@ -136,9 +142,10 @@ export type ResolvedConfig = Readonly<
     alias: Alias[]
     plugins: readonly Plugin[]
     server: ServerOptions
-    build: Required<BuildOptions>
+    build: ResolvedBuildOptions
     assetsInclude: (file: string) => boolean
     logger: Logger
+    base: string
   }
 >
 
@@ -149,6 +156,7 @@ export async function resolveConfig(
 ): Promise<ResolvedConfig> {
   let config = inlineConfig
   let mode = inlineConfig.mode || defaultMode
+  const logger = createLogger(config.logLevel, config.clearScreen)
 
   // some dependencies e.g. @vue/compiler-* relies on NODE_ENV for getting
   // production-specific behavior, so set it here even though we haven't
@@ -218,8 +226,45 @@ export async function resolveConfig(
     process.env.NODE_ENV = 'production'
   }
 
+  // resolve public base url
+  // TODO remove when out of beta
+  if (config.build?.base) {
+    logger.warn(
+      chalk.yellow.bold(
+        `(!) "build.base" config option is deprecated. ` +
+          `"base" is now a root-level config option.`
+      )
+    )
+    config.base = config.build.base
+  }
+
+  let BASE_URL = config.base || '/'
+  if (!BASE_URL.startsWith('/') || !BASE_URL.endsWith('/')) {
+    logger.warn(
+      chalk.bold.yellow(
+        `(!) "base" config option should start and end with "/".`
+      )
+    )
+    if (!BASE_URL.startsWith('/')) BASE_URL = '/' + BASE_URL
+    if (!BASE_URL.endsWith('/')) BASE_URL = BASE_URL + '/'
+  }
+
   const resolvedBuildOptions = resolveBuildOptions(config.build)
 
+  // TODO remove when out of beta
+  Object.defineProperty(resolvedBuildOptions, 'base', {
+    get() {
+      logger.warn(
+        chalk.yellow.bold(
+          `(!) "build.base" config option is deprecated. ` +
+            `"base" is now a root-level config option.\n` +
+            new Error().stack
+        )
+      )
+      return config.base
+    }
+  })
+
   // resolve optimizer cache directory
   const pkgPath = lookupFile(
     resolvedRoot,
@@ -233,6 +278,17 @@ export async function resolveConfig(
     ? createFilter(config.assetsInclude)
     : () => false
 
+  let hmr = config.server?.hmr === true ? {} : config.server?.hmr
+  hmr = {
+    ...hmr,
+    path: BASE_URL !== '/' ? BASE_URL.substr(1) : undefined
+  }
+
+  const server = {
+    ...config.server,
+    hmr
+  }
+
   const resolved = {
     ...config,
     configFile: configFile ? normalizePath(configFile) : undefined,
@@ -244,19 +300,20 @@ export async function resolveConfig(
     optimizeCacheDir,
     alias: resolvedAlias,
     plugins: userPlugins,
-    server: config.server || {},
+    server,
     build: resolvedBuildOptions,
     env: {
       ...userEnv,
-      BASE_URL: command === 'build' ? resolvedBuildOptions.base : '/',
+      BASE_URL,
       MODE: mode,
       DEV: !isProduction,
       PROD: isProduction
     },
     assetsInclude(file: string) {
       return DEFAULT_ASSETS_RE.test(file) || assetsFilter(file)
     },
-    logger: createLogger(config.logLevel, config.clearScreen)
+    logger,
+    base: BASE_URL
   }
 
   resolved.plugins = await resolvePlugins(

packages/vite/src/node/logger.ts

@@ -10,6 +10,7 @@ export interface Logger {
   warn(msg: string, options?: LogOptions): void
   error(msg: string, options?: LogOptions): void
   clearScreen(type: LogType): void
+  hasWarned: boolean
 }
 
 export interface LogOptions {
@@ -74,11 +75,13 @@ export function createLogger(
     }
   }
 
-  return {
+  const logger: Logger = {
+    hasWarned: false,
     info(msg, opts) {
       output('info', msg, opts)
     },
     warn(msg, opts) {
+      logger.hasWarned = true
       output('warn', msg, opts)
     },
     error(msg, opts) {
@@ -90,4 +93,6 @@ export function createLogger(
       }
     }
   }
+
+  return logger
 }

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

@@ -59,7 +59,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         s = s || (s = new MagicString(code))
         const [full, fileHandle, postfix = ''] = match
         const outputFilepath =
-          config.build.base + this.getFileName(fileHandle) + postfix
+          config.base + this.getFileName(fileHandle) + postfix
         s.overwrite(
           match.index,
           match.index + full.length,
@@ -118,18 +118,22 @@ export function fileToUrl(
   }
 }
 
-function fileToDevUrl(id: string, { root }: ResolvedConfig) {
+function fileToDevUrl(id: string, { root, base }: ResolvedConfig) {
+  let rtn: string
+
   if (checkPublicFile(id, root)) {
     // in public dir, keep the url as-is
-    return id
-  }
-  if (id.startsWith(root)) {
+    rtn = id
+  } else if (id.startsWith(root)) {
     // in project root, infer short public path
-    return '/' + path.posix.relative(root, id)
+    rtn = '/' + path.posix.relative(root, id)
+  } else {
+    // outside of project root, use absolute fs path
+    // (this is special handled by the serve static middleware
+    rtn = FS_PREFIX + id
   }
-  // outside of project root, use absolute fs path
-  // (this is special handled by the serve static middleware
-  return FS_PREFIX + id
+
+  return path.posix.join(base, rtn)
 }
 
 const assetCache = new WeakMap<ResolvedConfig, Map<string, string>>()
@@ -145,7 +149,7 @@ async function fileToBuiltUrl(
   skipPublicCheck = false
 ): Promise<string> {
   if (!skipPublicCheck && checkPublicFile(id, config.root)) {
-    return config.build.base + id.slice(1)
+    return config.base + id.slice(1)
   }
 
   let cache = assetCache.get(config)
@@ -197,7 +201,7 @@ export async function urlToBuiltUrl(
   pluginContext: PluginContext
 ): Promise<string> {
   if (checkPublicFile(url, config.root)) {
-    return config.build.base + url.slice(1)
+    return config.base + url.slice(1)
   }
   const file = url.startsWith('/')
     ? path.join(config.root, url)

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

@@ -37,6 +37,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
 
         return code
           .replace(`__MODE__`, JSON.stringify(config.mode))
+          .replace(`__BASE__`, JSON.stringify(config.base))
           .replace(`__ROOT__`, JSON.stringify(config.root))
           .replace(`__DEFINES__`, JSON.stringify(config.define || {}))
           .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))

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

@@ -100,15 +100,20 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
 
       const urlReplacer: CssUrlReplacer = server
         ? (url, importer) => {
-            if (url.startsWith('/')) return url
-            const filePath = normalizePath(
-              path.resolve(path.dirname(importer || id), url)
-            )
-            if (filePath.startsWith(config.root)) {
-              return filePath.slice(config.root.length)
+            let rtn: string
+
+            if (url.startsWith('/')) {
+              rtn = url
             } else {
-              return `${FS_PREFIX}${filePath}`
+              const filePath = normalizePath(
+                path.resolve(path.dirname(importer || id), url)
+              )
+              rtn = filePath.startsWith(config.root)
+                ? filePath.slice(config.root.length)
+                : `${FS_PREFIX}${filePath}`
             }
+
+            return path.posix.join(config.base, rtn)
           }
         : (url, importer) => {
             return urlToBuiltUrl(url, importer || id, config, this)
@@ -194,7 +199,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
           return [
             `import { updateStyle, removeStyle } from ${JSON.stringify(
-              CLIENT_PUBLIC_PATH
+              path.posix.join(config.base, CLIENT_PUBLIC_PATH)
             )}`,
             `const id = ${JSON.stringify(id)}`,
             `const css = ${JSON.stringify(css)}`,
@@ -235,7 +240,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       // replace asset url references with resolved url
       chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileId, postfix = '') => {
-        return config.build.base + this.getFileName(fileId) + postfix
+        return config.base + this.getFileName(fileId) + postfix
       })
 
       if (config.build.cssCodeSplit) {

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

@@ -11,7 +11,7 @@ export function dynamicImportPolyfillPlugin(config: ResolvedConfig): Plugin {
   const polyfillString =
     `const p = ${polyfill.toString()};` +
     `${isModernFlag}&&p(${JSON.stringify(
-      path.posix.join(config.build.base, config.build.assetsDir, '/')
+      path.posix.join(config.base, config.build.assetsDir, '/')
     )});`
 
   return {

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

@@ -10,14 +10,20 @@ import MagicString from 'magic-string'
 import { checkPublicFile, assetUrlRE, urlToBuiltUrl } from './asset'
 import { isCSSRequest, chunkToEmittedCssFileMap } from './css'
 import { polyfillId } from './dynamicImportPolyfill'
-import { AttributeNode, NodeTransform, NodeTypes } from '@vue/compiler-dom'
+import {
+  AttributeNode,
+  NodeTransform,
+  NodeTypes,
+  ElementNode
+} from '@vue/compiler-dom'
 
 const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
 export const isHTMLProxy = (id: string) => htmlProxyRE.test(id)
-export const htmlCommentRE = /<!--[\s\S]*?-->/g
-export const scriptModuleRE = /(<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>)([\s\S]*?)<\/script>/gm
 
-export function htmlPlugin(): Plugin {
+const htmlCommentRE = /<!--[\s\S]*?-->/g
+const scriptModuleRE = /(<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>)([\s\S]*?)<\/script>/gm
+
+export function htmlInlineScriptProxyPlugin(): Plugin {
   return {
     name: 'vite:html',
 
@@ -49,7 +55,7 @@ export function htmlPlugin(): Plugin {
 }
 
 // this extends the config in @vue/compiler-sfc with <link href>
-const assetAttrsConfig: Record<string, string[]> = {
+export const assetAttrsConfig: Record<string, string[]> = {
   link: ['href'],
   video: ['src', 'poster'],
   source: ['src'],
@@ -58,6 +64,61 @@ const assetAttrsConfig: Record<string, string[]> = {
   use: ['xlink:href', 'href']
 }
 
+export async function traverseHtml(
+  html: string,
+  filePath: string,
+  visitor: NodeTransform
+) {
+  // lazy load compiler
+  const { parse, transform } = await import('@vue/compiler-dom')
+  // @vue/compiler-core doesn't like lowercase doctypes
+  html = html.replace(/<!doctype\s/i, '<!DOCTYPE ')
+  try {
+    const ast = parse(html, { comments: true })
+    transform(ast, {
+      nodeTransforms: [visitor]
+    })
+  } catch (e) {
+    const parseError = {
+      loc: filePath,
+      frame: '',
+      ...formatParseError(e, filePath, html)
+    }
+    throw new Error(
+      `Unable to parse ${JSON.stringify(parseError.loc)}\n${parseError.frame}`
+    )
+  }
+}
+
+export function getScriptInfo(node: ElementNode) {
+  let src: AttributeNode | undefined
+  let isModule = false
+  for (let i = 0; i < node.props.length; i++) {
+    const p = node.props[i]
+    if (p.type === NodeTypes.ATTRIBUTE) {
+      if (p.name === 'src') {
+        src = p
+      } else if (p.name === 'type' && p.value && p.value.content === 'module') {
+        isModule = true
+      }
+    }
+  }
+  return { src, isModule }
+}
+
+function formatParseError(e: any, id: string, html: string): Error {
+  // normalize the error to rollup format
+  if (e.loc) {
+    e.frame = generateCodeFrame(html, e.loc.start.offset)
+    e.loc = {
+      file: id,
+      line: e.loc.start.line,
+      column: e.loc.start.column
+    }
+  }
+  return e
+}
+
 /**
  * Compiles index.html into an entry js module
  */
@@ -76,35 +137,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         // pre-transform
         html = await applyHtmlTransforms(html, publicPath, id, preHooks)
 
-        function formatError(e: any): Error {
-          // normalize the error to rollup format
-          if (e.loc) {
-            e.frame = generateCodeFrame(html, e.loc.start.offset)
-            e.loc = {
-              file: id,
-              line: e.loc.start.line,
-              column: e.loc.start.column
-            }
-          }
-          return e
-        }
-
-        // lazy load compiler-dom
-        const { parse, transform } = await import('@vue/compiler-dom')
-        // @vue/compiler-core doesn't like lowercase doctypes
-        html = html.replace(/<!doctype\s/i, '<!DOCTYPE ')
-        let ast
-        try {
-          ast = parse(html, { comments: true })
-        } catch (e) {
-          this.error(formatError(e))
-        }
-
         let js = ''
         const s = new MagicString(html)
         const assetUrls: AttributeNode[] = []
         let inlineModuleIndex = -1
-        const viteHtmlTransform: NodeTransform = (node) => {
+
+        await traverseHtml(html, id, (node) => {
           if (node.type !== NodeTypes.ELEMENT) {
             return
           }
@@ -113,26 +151,19 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
           // script tags
           if (node.tag === 'script') {
-            const srcAttr = node.props.find(
-              (p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'src'
-            ) as AttributeNode
-            const typeAttr = node.props.find(
-              (p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'type'
-            ) as AttributeNode
-            const isJsModule =
-              typeAttr && typeAttr.value && typeAttr.value.content === 'module'
-
-            const url = srcAttr && srcAttr.value && srcAttr.value.content
+            const { src, isModule } = getScriptInfo(node)
+
+            const url = src && src.value && src.value.content
             if (url && checkPublicFile(url, config.root)) {
               // referencing public dir url, prefix with base
               s.overwrite(
-                srcAttr.value!.loc.start.offset,
-                srcAttr.value!.loc.end.offset,
-                config.build.base + url.slice(1)
+                src!.value!.loc.start.offset,
+                src!.value!.loc.end.offset,
+                config.base + url.slice(1)
               )
             }
 
-            if (isJsModule) {
+            if (isModule) {
               inlineModuleIndex++
               if (url && !isExcludedUrl(url)) {
                 // <script type="module" src="..."/>
@@ -170,7 +201,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                   s.overwrite(
                     p.value.loc.start.offset,
                     p.value.loc.end.offset,
-                    config.build.base + url.slice(1)
+                    config.base + url.slice(1)
                   )
                 }
               }
@@ -182,15 +213,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             // ones in the end.
             s.remove(node.loc.start.offset, node.loc.end.offset)
           }
-        }
-
-        try {
-          transform(ast, {
-            nodeTransforms: [viteHtmlTransform]
-          })
-        } catch (e) {
-          this.error(formatError(e))
-        }
+        })
 
         // for each encountered asset url, rewrite original html so that it
         // references the post-build location.
@@ -263,7 +286,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       for (const [id, html] of processedHtml) {
         // resolve asset url references
         let result = html.replace(assetUrlRE, (_, fileId, postfix = '') => {
-          return config.build.base + this.getFileName(fileId) + postfix
+          return config.base + this.getFileName(fileId) + postfix
         })
 
         // find corresponding entry chunk
@@ -335,7 +358,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
 export interface HtmlTagDescriptor {
   tag: string
-  attrs?: Record<string, string | boolean>
+  attrs?: Record<string, string | boolean | undefined>
   children?: string | HtmlTagDescriptor[]
   /**
    * default: 'head-prepend'
@@ -466,7 +489,7 @@ export async function applyHtmlTransforms(
 }
 
 function toPublicPath(filename: string, config: ResolvedConfig) {
-  return isExternalUrl(filename) ? filename : config.build.base + filename
+  return isExternalUrl(filename) ? filename : config.base + filename
 }
 
 const headInjectRE = /<\/head>/

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

@@ -85,6 +85,7 @@ function markExplicitImport(url: string) {
  *     ```
  */
 export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
+  const clientPublicPath = path.posix.join(config.base, CLIENT_PUBLIC_PATH)
   let server: ViteDevServer
   let optimizedSource: string | undefined
 
@@ -162,6 +163,10 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         url: string,
         pos: number
       ): Promise<[string, string]> => {
+        if (config.base !== '/' && url.startsWith(config.base)) {
+          url = url.replace(config.base, '/')
+        }
+
         const resolved = await this.resolve(url, importer)
 
         if (!resolved) {
@@ -200,6 +205,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         // mark non-js/css imports with `?import`
         url = markExplicitImport(url)
 
+        // prepend base path without trailing slash ( default empty string )
+        url = path.posix.join(config.base, url)
+
         // for relative js/css imports, inherit importer's version query
         // do not do this for unknown type imports, otherwise the appended
         // query can break 3rd party plugin's extension checks.
@@ -323,7 +331,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             }
           }
           // skip client
-          if (url === CLIENT_PUBLIC_PATH) {
+          if (url === clientPublicPath) {
             continue
           }
 
@@ -349,7 +357,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           if (url !== rawUrl) {
             // for optimized cjs deps, support named imports by rewriting named
             // imports to const assignments.
-            if (url.startsWith(OPTIMIZED_PREFIX)) {
+            if (resolvedId.startsWith(OPTIMIZED_PREFIX)) {
               const depId = resolvedId.slice(OPTIMIZED_PREFIX.length)
               const optimizedId = makeLegalIdentifier(depId)
               optimizedSource =
@@ -433,16 +441,16 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         )
         // inject hot context
         str().prepend(
-          `import { createHotContext as __vite__createHotContext } from "${CLIENT_PUBLIC_PATH}";` +
+          `import { createHotContext as __vite__createHotContext } from "${clientPublicPath}";` +
             `import.meta.hot = __vite__createHotContext(${JSON.stringify(
-              importerModule.url
+              path.posix.join(config.base, importerModule.url)
             )});`
         )
       }
 
       if (needQueryInjectHelper) {
         str().prepend(
-          `import { injectQuery as __vite__injectQuery } from "${CLIENT_PUBLIC_PATH}";`
+          `import { injectQuery as __vite__injectQuery } from "${clientPublicPath}";`
         )
       }
 

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

@@ -202,10 +202,10 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                     if (filename === ownerFilename) return
                     const chunk = bundle[filename] as OutputChunk | undefined
                     if (chunk) {
-                      deps.add(config.build.base + chunk.fileName)
+                      deps.add(config.base + chunk.fileName)
                       const cssId = chunkToEmittedCssFileMap.get(chunk)
                       if (cssId) {
-                        deps.add(config.build.base + this.getFileName(cssId))
+                        deps.add(config.base + this.getFileName(cssId))
                       }
                       chunk.imports.forEach(addDeps)
                     }

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

@@ -8,7 +8,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlPlugin } from './html'
+import { htmlInlineScriptProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { webWorkerPlugin } from './worker'
 import { dynamicImportPolyfillPlugin } from './dynamicImportPolyfill'
@@ -42,7 +42,7 @@ export async function resolvePlugins(
       },
       config
     ),
-    htmlPlugin(),
+    htmlInlineScriptProxyPlugin(),
     cssPlugin(config),
     config.esbuild !== false ? esbuildPlugin(config.esbuild) : null,
     jsonPlugin({

packages/vite/src/node/server/index.ts

@@ -17,6 +17,7 @@ import {
 import { FSWatcher, WatchOptions } from 'types/chokidar'
 import { resolveHttpsConfig } from '../server/https'
 import { createWebSocketServer, WebSocketServer } from '../server/ws'
+import { baseMiddleware } from './middlewares/base'
 import { proxyMiddleware, ProxyOptions } from './middlewares/proxy'
 import { transformMiddleware } from './middlewares/transform'
 import { indexHtmlMiddleware } from './middlewares/indexHtml'
@@ -109,6 +110,11 @@ export interface ServerOptions {
    * Create Vite dev server to be used as a middleware in an existing server
    */
   middlewareMode?: boolean
+  /**
+   * Prepend this folder to http requests, for use when proxying vite as a subfolder
+   * Should start and end with the `/` character
+   */
+  base?: string
 }
 
 /**
@@ -370,6 +376,11 @@ export async function createServer(
     middlewares.use(proxyMiddleware(server))
   }
 
+  // base
+  if (config.base !== '/') {
+    middlewares.use(baseMiddleware(server))
+  }
+
   // open in editor support
   middlewares.use('/__open-in-editor', launchEditorMiddleware())
 
@@ -395,12 +406,7 @@ export async function createServer(
           {
             from: /\/$/,
             to({ parsedUrl }: any) {
-              const rewritten = parsedUrl.pathname + 'index.html'
-              if (fs.existsSync(path.join(root, rewritten))) {
-                return rewritten
-              } else {
-                return `/index.html`
-              }
+              return parsedUrl.pathname + 'index.html'
             }
           }
         ]
@@ -499,6 +505,7 @@ async function startServer(
   let hostname = options.host || 'localhost'
   const protocol = options.https ? 'https' : 'http'
   const info = server.config.logger.info
+  const base = server.config.base
 
   return new Promise((resolve, reject) => {
     const onError = (e: Error & { code?: string }) => {
@@ -521,7 +528,9 @@ async function startServer(
     httpServer.listen(port, () => {
       httpServer.removeListener('error', onError)
 
-      info(`\n  Vite dev server running at:\n`, { clear: true })
+      info(`\n  Vite dev server running at:\n`, {
+        clear: !server.config.logger.hasWarned
+      })
       const interfaces = os.networkInterfaces()
       Object.keys(interfaces).forEach((key) =>
         (interfaces[key] || [])
@@ -535,7 +544,7 @@ async function startServer(
             }
           })
           .forEach(({ type, host }) => {
-            const url = `${protocol}://${host}:${chalk.bold(port)}/`
+            const url = `${protocol}://${host}:${chalk.bold(port)}${base}`
             info(`  > ${type} ${chalk.cyan(url)}`)
           })
       )
@@ -570,7 +579,7 @@ async function startServer(
       }
 
       if (options.open) {
-        const path = typeof options.open === 'string' ? options.open : ''
+        const path = typeof options.open === 'string' ? options.open : base
         openBrowser(
           `${protocol}://${hostname}:${port}${path}`,
           true,

packages/vite/src/node/server/middlewares/base.ts

@@ -0,0 +1,29 @@
+import { parse as parseUrl } from 'url'
+import { ViteDevServer } from '..'
+import { Connect } from 'types/connect'
+
+// this middleware is only active when (config.base !== '/')
+
+export function baseMiddleware({
+  config
+}: ViteDevServer): Connect.NextHandleFunction {
+  const base = config.base
+
+  return (req, res, next) => {
+    const url = req.url!
+    const parsed = parseUrl(url)
+    const path = parsed.pathname || '/'
+
+    if (path.startsWith(base)) {
+      // rewrite url to remove base.. this ensures that other middleware does not need to consider base being prepended or not
+      req.url = url.replace(base, '/')
+    } else if (path === '/' || path === '/index.html') {
+      // to prevent confusion, do not allow access at / if we have specified a base path
+      res.statusCode = 404
+      res.end()
+      return
+    }
+
+    next()
+  }
+}

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -1,44 +1,99 @@
 import fs from 'fs'
 import path from 'path'
+import MagicString from 'magic-string'
+import { NodeTypes } from '@vue/compiler-dom'
 import { Connect } from 'types/connect'
 import { Plugin } from '../../plugin'
 import {
-  scriptModuleRE,
   applyHtmlTransforms,
+  getScriptInfo,
   IndexHtmlTransformHook,
   resolveHtmlTransforms,
-  htmlCommentRE
+  traverseHtml
 } from '../../plugins/html'
 import { ViteDevServer } from '../..'
 import { send } from '../send'
 import { CLIENT_PUBLIC_PATH, FS_PREFIX } from '../../constants'
 import { cleanUrl } from '../../utils'
+import { assetAttrsConfig } from '../../plugins/html'
 
-const devHtmlHook: IndexHtmlTransformHook = (html, { path }) => {
-  let index = -1
-  const comments: string[] = []
+const devHtmlHook: IndexHtmlTransformHook = async (
+  html,
+  { path: htmlPath, server }
+) => {
+  const config = server?.config!
+  const base = config.base || '/'
 
-  html = html
-    .replace(htmlCommentRE, (m) => {
-      comments.push(m)
-      return `<!--VITE_COMMENT_${comments.length - 1}-->`
-    })
-    .replace(scriptModuleRE, (_match, _openTag, script) => {
-      index++
-      if (script) {
-        // convert inline <script type="module"> into imported modules
-        return `<script type="module" src="${path}?html-proxy&index=${index}.js"></script>`
+  const s = new MagicString(html)
+  let scriptModuleIndex = -1
+
+  await traverseHtml(html, htmlPath, (node) => {
+    if (node.type !== NodeTypes.ELEMENT) {
+      return
+    }
+
+    // script tags
+    if (node.tag === 'script') {
+      const { src, isModule } = getScriptInfo(node)
+      if (isModule) {
+        scriptModuleIndex++
+      }
+
+      if (src) {
+        const url = src.value?.content || ''
+        if (url.startsWith('/')) {
+          // prefix with base
+          s.overwrite(
+            src.value!.loc.start.offset,
+            src.value!.loc.end.offset,
+            `"${config.base + url.slice(1)}"`
+          )
+        }
+      } else if (isModule) {
+        // inline js module. convert to src="proxy"
+        s.overwrite(
+          node.loc.start.offset,
+          node.loc.end.offset,
+          `<script type="module" src="${
+            config.base + htmlPath.slice(1)
+          }?html-proxy&index=${scriptModuleIndex}.js"></script>`
+        )
       }
-      return _match
-    })
-    .replace(/<!--VITE_COMMENT_(\d+)-->/g, (_, i) => comments[i])
+    }
+
+    // elements with [href/src] attrs
+    const assetAttrs = assetAttrsConfig[node.tag]
+    if (assetAttrs) {
+      for (const p of node.props) {
+        if (
+          p.type === NodeTypes.ATTRIBUTE &&
+          p.value &&
+          assetAttrs.includes(p.name)
+        ) {
+          const url = p.value.content || ''
+          if (url.startsWith('/')) {
+            s.overwrite(
+              p.value.loc.start.offset,
+              p.value.loc.end.offset,
+              `"${config.base + url.slice(1)}"`
+            )
+          }
+        }
+      }
+    }
+  })
+
+  html = s.toString()
 
   return {
     html,
     tags: [
       {
         tag: 'script',
-        attrs: { type: 'module', src: CLIENT_PUBLIC_PATH },
+        attrs: {
+          type: 'module',
+          src: path.posix.join(base, CLIENT_PUBLIC_PATH)
+        },
         injectTo: 'head-prepend'
       }
     ]

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

@@ -5,7 +5,7 @@ import { chunkToEmittedCssFileMap } from '../plugins/css'
 export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
   // module id => preload assets mapping
   const ssrManifest: Record<string, string[]> = {}
-  const base = config.build.base
+  const base = config.base
 
   return {
     name: 'vite:manifest',

scripts/jestPerTestSetup.ts

@@ -66,8 +66,9 @@ beforeAll(async () => {
       if (!isBuildTest) {
         process.env.VITE_INLINE = 'inline-serve'
         server = await (await createServer(options)).listen()
-        // use resolved port from server
-        const url = ((global as any).viteTestUrl = `http://localhost:${server.config.server.port}`)
+        // use resolved port/base from server
+        const base = server.config.base === '/' ? '' : server.config.base
+        const url = ((global as any).viteTestUrl = `http://localhost:${server.config.server.port}${base}`)
         await page.goto(url)
       } else {
         process.env.VITE_INLINE = 'inline-build'
@@ -100,7 +101,7 @@ function startStaticServer(): Promise<string> {
   try {
     config = require(configFile)
   } catch (e) {}
-  const base = config?.build?.base || ''
+  const base = (config?.base || '/') === '/' ? '' : config.base
 
   // @ts-ignore
   if (config && config.__test__) {