From 5d7ac468091adf2d6809e6a735990bf20b28de87 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 2 May 2020 14:46:02 -0400
Subject: [PATCH] feat: handle relative asset paths

---
 package.json                          |   1 +
 src/node/build.ts                     | 297 +++++++++-----------------
 src/node/buildPluginAsset.ts          |  38 ++++
 src/node/buildPluginCss.ts            |  41 ++++
 src/node/buildPluginHtml.ts           |  23 ++
 src/node/buildPluginResolve.ts        |  51 +++++
 src/node/index.ts                     |   2 +-
 src/node/resolveVue.ts                |  33 +--
 src/node/serverPluginModuleResolve.ts |   2 +-
 src/node/serverPluginServeStatic.ts   |  16 +-
 src/node/serverPluginVue.ts           |   4 +-
 src/node/utils.ts                     |  10 +
 12 files changed, 300 insertions(+), 218 deletions(-)
 create mode 100644 src/node/buildPluginAsset.ts
 create mode 100644 src/node/buildPluginCss.ts
 create mode 100644 src/node/buildPluginHtml.ts
 create mode 100644 src/node/buildPluginResolve.ts

diff --git a/package.json b/package.json
index 06a1a7368782bd..4547b555e282c2 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "koa": "^2.11.0",
     "koa-conditional-get": "^2.0.0",
     "koa-etag": "^3.0.0",
+    "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
     "lru-cache": "^5.1.1",
     "magic-string": "^0.25.7",
diff --git a/src/node/build.ts b/src/node/build.ts
index 5ba401e311f415..d8f8973a096c62 100644
--- a/src/node/build.ts
+++ b/src/node/build.ts
@@ -2,77 +2,69 @@ import path from 'path'
 import { promises as fs } from 'fs'
 import {
   rollup as Rollup,
-  Plugin,
   InputOptions,
   OutputOptions,
   RollupOutput
 } from 'rollup'
 import { resolveVue } from './resolveVue'
-import { hmrClientId } from './serverPluginHmr'
 import resolve from 'resolve-from'
 import chalk from 'chalk'
 import { Resolver, createResolver } from './resolver'
 import { Options } from 'rollup-plugin-vue'
+import { scriptRE } from './utils'
+import { createBuildResolvePlugin } from './buildPluginResolve'
+import { createBuildHtmlPlugin } from './buildPluginHtml'
+import { createBuildCssPlugin } from './buildPluginCss'
+import { createBuildAssetPlugin } from './buildPluginAsset'
 
-const debugBuild = require('debug')('vite:build')
-const scriptRE = /<script\b[^>]*>([\s\S]*?)<\/script>/gm
-
-interface BuildOptionsBase {
+export interface BuildOptions {
   root?: string
   cdn?: boolean
-  cssFileName?: string
   resolvers?: Resolver[]
+  outDir?: string
+  assetsDir?: string
   // list files that are included in the build, but not inside project root.
   srcRoots?: string[]
   rollupInputOptions?: InputOptions
+  rollupOutputOptions?: OutputOptions
+  rollupPluginVueOptions?: Partial<Options>
+  emitAssets?: boolean
   write?: boolean // if false, does not write to disk.
   minify?: boolean
   silent?: boolean
-  rollupPluginVueOptions?: Partial<Options>
-}
-
-interface SingleBuildOptions extends BuildOptionsBase {
-  rollupOutputOptions?: OutputOptions
-}
-
-interface MultiBuildOptions extends BuildOptionsBase {
-  rollupOutputOptions?: OutputOptions[]
 }
 
-export type BuildOptions = SingleBuildOptions | MultiBuildOptions
-
 export interface BuildResult {
-  js: RollupOutput['output']
-  css: string
   html: string
+  assets: RollupOutput['output']
 }
 
-export async function build(options: SingleBuildOptions): Promise<BuildResult>
-export async function build(options: MultiBuildOptions): Promise<BuildResult[]>
-export async function build({
-  root = process.cwd(),
-  cdn = !resolveVue(root).hasLocalVue,
-  cssFileName = 'style.css',
-  resolvers = [],
-  srcRoots = [],
-  rollupInputOptions = {},
-  rollupOutputOptions = {},
-  write = true,
-  minify = true,
-  silent = false,
-  rollupPluginVueOptions = {}
-}: BuildOptions = {}): Promise<BuildResult | BuildResult[]> {
+export async function build(options: BuildOptions = {}): Promise<BuildResult> {
   process.env.NODE_ENV = 'production'
-
   const start = Date.now()
 
+  const {
+    root = process.cwd(),
+    cdn = !resolveVue(root).hasLocalVue,
+    outDir = path.resolve(root, 'dist'),
+    assetsDir = '.',
+    resolvers = [],
+    srcRoots = [],
+    rollupInputOptions = {},
+    rollupOutputOptions = {},
+    rollupPluginVueOptions = {},
+    emitAssets = true,
+    write = true,
+    minify = true,
+    silent = false
+  } = options
+
   // lazy require rollup so that we don't load it when only using the dev server
   // importing it just for the types
   const rollup = require('rollup').rollup as typeof Rollup
   const indexPath = path.resolve(root, 'index.html')
-  // make sure to use the same verison of vue from the CDN.
-  const vueVersion = resolveVue(root).version
-  const cdnLink = `https://unpkg.com/vue@${vueVersion}/dist/vue.esm-browser.prod.js`
+  const cssFileName = 'style.css'
+  const resolvedAssetsPath = path.join(outDir, assetsDir)
 
   let indexContent: string | null = null
   try {
@@ -84,96 +76,19 @@ export async function build({
   const resolver = createResolver(root, resolvers)
   srcRoots.push(root)
 
-  const vitePlugin: Plugin = {
-    name: 'vite',
-    resolveId(id: string) {
-      if (id === hmrClientId) {
-        return hmrClientId
-      } else if (id.startsWith('/')) {
-        // if id starts with any of the src root directories, it's a file request
-        if (srcRoots.some((root) => id.startsWith(root))) {
-          return
-        }
-        const resolved = resolver.requestToFile(id)
-        debugBuild(`[resolve]`, id, `-->`, resolved)
-        return resolved
-      } else if (id === 'vue') {
-        if (!cdn) {
-          return resolveVue(root, true).vue
-        } else {
-          return {
-            id: cdnLink,
-            external: true
-          }
-        }
-      } else {
-        const request = resolver.idToRequest(id)
-        if (request) {
-          const resolved = resolver.requestToFile(request)
-          debugBuild(`[resolve]`, id, `-->`, request, `--> `, resolved)
-          return resolved
-        }
-      }
-    },
-    load(id: string) {
-      if (id === hmrClientId) {
-        return `export const hot = {}`
-      } else if (id === indexPath) {
-        let script = ''
-        if (indexContent) {
-          let match
-          while ((match = scriptRE.exec(indexContent))) {
-            // TODO handle <script type="module" src="..."/>
-            // just add it as an import
-            script += match[1]
-          }
-        }
-        return script
-      }
-    }
-  }
-
-  const styles: Map<string, string> = new Map()
-  const cssExtractPlugin: Plugin = {
-    name: 'vite-css',
-    transform(code: string, id: string) {
-      if (id.endsWith('.css')) {
-        styles.set(id, code)
-        return '/* css extracted by vite */'
-      }
-    },
-
-    async generateBundle(_options, bundle) {
-      let css = ''
-      // finalize extracted css
-      styles.forEach((s) => {
-        css += s
-      })
-      // minify with cssnano
-      if (minify) {
-        css = (
-          await require('postcss')([require('cssnano')]).process(css, {
-            from: undefined
-          })
-        ).css
-      }
-
-      bundle[cssFileName] = {
-        isAsset: true,
-        type: 'asset',
-        fileName: cssFileName,
-        source: css
-      }
-    }
-  }
-
   const bundle = await rollup({
     input: path.resolve(root, 'index.html'),
     ...rollupInputOptions,
     plugins: [
+      // user plugins
       ...(rollupInputOptions.plugins || []),
-      vitePlugin,
+      // vite:resolve
+      createBuildResolvePlugin(root, cdn, srcRoots, resolver),
+      // vite:html
+      ...(indexContent ? [createBuildHtmlPlugin(indexPath, indexContent)] : []),
+      // vue
       require('rollup-plugin-vue')({
+        transformAssetUrls: true,
         // TODO: for now we directly handle pre-processors in rollup-plugin-vue
         // so that we don't need to install dedicated rollup plugins.
         // In the future we probably want to still use rollup plugins so that
@@ -190,7 +105,12 @@ export async function build({
         'process.env.NODE_ENV': '"production"',
         __DEV__: 'false'
       }),
-      cssExtractPlugin,
+      // vite:css
+      createBuildCssPlugin(cssFileName, minify),
+      // vite:asset
+      createBuildAssetPlugin(assetsDir),
+      // minify with terser
+      // modules: true and toplevel: true are implied with format: 'es'
       ...(minify ? [require('rollup-plugin-terser').terser()] : [])
     ],
     onwarn(warning, warn) {
@@ -200,99 +120,78 @@ export async function build({
     }
   })
 
-  async function generate(options: OutputOptions) {
-    const outDir = options.dir || path.resolve(root, 'dist')
-    const { output } = await bundle.generate({
-      dir: outDir,
-      format: 'es',
-      ...options
-    })
+  const { output } = await bundle.generate({
+    format: 'es',
+    ...rollupOutputOptions
+  })
 
-    let generatedIndex =
-      indexContent && indexContent.replace(scriptRE, '').trim()
-    // TODO handle public path for injections?
-    // this would also affect paths in templates and css.
-    if (generatedIndex) {
-      // inject css link
-      generatedIndex = injectCSS(generatedIndex, cssFileName)
-      if (cdn) {
-        // if not inlining vue, inject cdn link so it can start the fetch early
-        generatedIndex = injectScript(generatedIndex, cdnLink)
-      }
+  let generatedIndex = indexContent && indexContent.replace(scriptRE, '').trim()
+  // TODO handle public path for injections?
+  // this would also affect paths in templates and css.
+  if (generatedIndex) {
+    // inject css link
+    generatedIndex = injectCSS(generatedIndex, cssFileName)
+    if (cdn) {
+      // if not inlining vue, inject cdn link so it can start the fetch early
+      generatedIndex = injectScript(generatedIndex, resolveVue(root).cdnLink)
     }
+  }
 
-    if (write) {
-      await fs.rmdir(outDir, { recursive: true })
-      await fs.mkdir(outDir, { recursive: true })
-    }
+  if (write) {
+    await fs.rmdir(outDir, { recursive: true })
+    await fs.mkdir(outDir, { recursive: true })
+  }
 
-    let css = ''
-    // inject / write bundle
-    for (const chunk of output) {
-      if (chunk.type === 'chunk') {
-        if (chunk.isEntry && generatedIndex) {
-          // inject chunk to html
-          generatedIndex = injectScript(generatedIndex, chunk.fileName)
-        }
-        // write chunk
-        if (write) {
-          const filepath = path.join(outDir, chunk.fileName)
-          !silent &&
-            console.log(
-              `write ${chalk.cyan(path.relative(process.cwd(), filepath))}`
-            )
-          await fs.mkdir(path.dirname(filepath), { recursive: true })
-          await fs.writeFile(filepath, chunk.code)
-        }
-      } else {
-        // write asset
-        if (chunk.fileName === cssFileName) {
-          css = chunk.source.toString()
-        }
-        const filepath = path.join(outDir, chunk.fileName)
-        !silent &&
-          console.log(
-            `write ${chalk.magenta(path.relative(process.cwd(), filepath))}`
-          )
-        await fs.mkdir(path.dirname(filepath), { recursive: true })
-        await fs.writeFile(filepath, chunk.source)
+  // inject / write bundle
+  for (const chunk of output) {
+    if (chunk.type === 'chunk') {
+      if (chunk.isEntry && generatedIndex) {
+        // inject chunk to html
+        generatedIndex = injectScript(generatedIndex, chunk.fileName)
       }
-    }
-
-    if (write) {
-      // write html
-      if (generatedIndex) {
-        const indexOutPath = path.join(outDir, 'index.html')
+      // write chunk
+      if (write) {
+        const filepath = path.join(resolvedAssetsPath, chunk.fileName)
         !silent &&
           console.log(
-            `write ${chalk.green(path.relative(process.cwd(), indexOutPath))}`
+            `write ${chalk.cyan(path.relative(process.cwd(), filepath))}`
           )
-        await fs.writeFile(indexOutPath, generatedIndex)
+        await fs.mkdir(path.dirname(filepath), { recursive: true })
+        await fs.writeFile(filepath, chunk.code)
       }
-    }
-
-    return {
-      js: output,
-      html: generatedIndex || '',
-      css
+    } else if (emitAssets) {
+      // write asset
+      const filepath = path.join(resolvedAssetsPath, chunk.fileName)
+      !silent &&
+        console.log(
+          `write ${chalk.magenta(path.relative(process.cwd(), filepath))}`
+        )
+      await fs.mkdir(path.dirname(filepath), { recursive: true })
+      await fs.writeFile(filepath, chunk.source)
     }
   }
 
-  let result: BuildResult | BuildResult[]
-  if (Array.isArray(rollupOutputOptions)) {
-    result = []
-    // make sure to build sequentially for correct css extraction
-    for (const options of rollupOutputOptions) {
-      result.push(await generate(options))
+  if (write) {
+    // write html
+    if (generatedIndex) {
+      const indexOutPath = path.join(outDir, 'index.html')
+      !silent &&
+        console.log(
+          `write ${chalk.green(path.relative(process.cwd(), indexOutPath))}`
+        )
+      await fs.writeFile(indexOutPath, generatedIndex)
     }
-  } else {
-    result = await generate(rollupOutputOptions)
   }
+
   !silent &&
     console.log(
       `Build completed in ${((Date.now() - start) / 1000).toFixed(2)}s.`
     )
-  return result
+
+  return {
+    assets: output,
+    html: generatedIndex || ''
+  }
 }
 
 function injectCSS(html: string, filename: string) {
diff --git a/src/node/buildPluginAsset.ts b/src/node/buildPluginAsset.ts
new file mode 100644
index 00000000000000..62ed7b1edfd017
--- /dev/null
+++ b/src/node/buildPluginAsset.ts
@@ -0,0 +1,38 @@
+import path from 'path'
+import { promises as fs } from 'fs'
+import { Plugin } from 'rollup'
+import { isStaticAsset } from './utils'
+import hash_sum from 'hash-sum'
+import slash from 'slash'
+
+const debug = require('debug')('vite:build:asset')
+
+export const createBuildAssetPlugin = (assetsDir: string): Plugin => {
+  const assets = new Map()
+
+  return {
+    name: 'vite:asset',
+    load(id) {
+      if (isStaticAsset(id)) {
+        const ext = path.extname(id)
+        const baseName = path.basename(id, ext)
+        const resolvedName = `${baseName}.${hash_sum(id)}${ext}`
+        assets.set(id, resolvedName)
+        const publicPath = slash(path.join('/', assetsDir, resolvedName))
+        debug(`${id} -> ${publicPath}`)
+        return `export default ${JSON.stringify(publicPath)}`
+      }
+    },
+
+    async generateBundle(_options, bundle) {
+      for (const [from, fileName] of assets) {
+        bundle[fileName] = {
+          isAsset: true,
+          type: 'asset',
+          fileName,
+          source: await fs.readFile(from)
+        }
+      }
+    }
+  }
+}
diff --git a/src/node/buildPluginCss.ts b/src/node/buildPluginCss.ts
new file mode 100644
index 00000000000000..e081660d6eef66
--- /dev/null
+++ b/src/node/buildPluginCss.ts
@@ -0,0 +1,41 @@
+import { Plugin } from 'rollup'
+
+export const createBuildCssPlugin = (
+  cssFileName: string,
+  minify: boolean
+): Plugin => {
+  const styles: Map<string, string> = new Map()
+
+  return {
+    name: 'vite:css',
+    transform(code: string, id: string) {
+      if (id.endsWith('.css')) {
+        styles.set(id, code)
+        return '/* css extracted by vite */'
+      }
+    },
+
+    async generateBundle(_options, bundle) {
+      let css = ''
+      // finalize extracted css
+      styles.forEach((s) => {
+        css += s
+      })
+      // minify with cssnano
+      if (minify) {
+        css = (
+          await require('postcss')([require('cssnano')]).process(css, {
+            from: undefined
+          })
+        ).css
+      }
+
+      bundle[cssFileName] = {
+        isAsset: true,
+        type: 'asset',
+        fileName: cssFileName,
+        source: css
+      }
+    }
+  }
+}
diff --git a/src/node/buildPluginHtml.ts b/src/node/buildPluginHtml.ts
new file mode 100644
index 00000000000000..74b4eadcacfb7f
--- /dev/null
+++ b/src/node/buildPluginHtml.ts
@@ -0,0 +1,23 @@
+import { Plugin } from 'rollup'
+import { scriptRE } from './utils'
+
+export const createBuildHtmlPlugin = (
+  indexPath: string,
+  indexContent: string
+): Plugin => {
+  return {
+    name: 'vite:html',
+    load(id) {
+      if (id === indexPath) {
+        let script = ''
+        let match
+        while ((match = scriptRE.exec(indexContent))) {
+          // TODO handle <script type="module" src="..."/>
+          // just add it as an import
+          script += match[1]
+        }
+        return script
+      }
+    }
+  }
+}
diff --git a/src/node/buildPluginResolve.ts b/src/node/buildPluginResolve.ts
new file mode 100644
index 00000000000000..4c4171b29b856d
--- /dev/null
+++ b/src/node/buildPluginResolve.ts
@@ -0,0 +1,51 @@
+import { Plugin } from 'rollup'
+import { hmrClientId } from './serverPluginHmr'
+import { InternalResolver } from './resolver'
+import { resolveVue } from './resolveVue'
+
+const debug = require('debug')('vite:build:resolve')
+
+export const createBuildResolvePlugin = (
+  root: string,
+  cdn: boolean,
+  srcRoots: string[],
+  resolver: InternalResolver
+): Plugin => {
+  return {
+    name: 'vite:resolve',
+    resolveId(id: string) {
+      if (id === hmrClientId) {
+        return hmrClientId
+      } else if (id.startsWith('/')) {
+        // if id starts with any of the src root directories, it's a file request
+        if (srcRoots.some((root) => id.startsWith(root))) {
+          return
+        }
+        const resolved = resolver.requestToFile(id)
+        debug(id, `-->`, resolved)
+        return resolved
+      } else if (id === 'vue') {
+        if (!cdn) {
+          return resolveVue(root).bundler
+        } else {
+          return {
+            id: resolveVue(root).cdnLink,
+            external: true
+          }
+        }
+      } else {
+        const request = resolver.idToRequest(id)
+        if (request) {
+          const resolved = resolver.requestToFile(request)
+          debug(id, `-->`, request, `--> `, resolved)
+          return resolved
+        }
+      }
+    },
+    load(id: string) {
+      if (id === hmrClientId) {
+        return `export const hot = {}`
+      }
+    }
+  }
+}
diff --git a/src/node/index.ts b/src/node/index.ts
index 67c84d727f1d8e..8cd7f5b255ed80 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -1,3 +1,3 @@
 export * from './server'
 export * from './build'
-export { cachedRead } from './utils'
+export { cachedRead, isStaticAsset } from './utils'
diff --git a/src/node/resolveVue.ts b/src/node/resolveVue.ts
index 9f0aa379deb004..b6cf7a93523464 100644
--- a/src/node/resolveVue.ts
+++ b/src/node/resolveVue.ts
@@ -4,27 +4,25 @@ import sfcCompiler from '@vue/compiler-sfc'
 import chalk from 'chalk'
 
 interface ResolvedVuePaths {
-  vue: string
+  browser: string
+  bundler: string
   version: string
   hasLocalVue: boolean
   compiler: string
+  cdnLink: string
 }
 
 let resolved: ResolvedVuePaths | undefined = undefined
 
-const toBuildPaths = (p: ResolvedVuePaths) => ({
-  ...p,
-  vue: p.vue.replace('esm-browser', 'esm-bundler')
-})
-
 // Resolve the correct `vue` and `@vue.compiler-sfc` to use.
 // If the user project has local installations of these, they should be used;
 // otherwise, fallback to the dependency of Vite itself.
-export function resolveVue(root: string, isBuild = false): ResolvedVuePaths {
+export function resolveVue(root: string): ResolvedVuePaths {
   if (resolved) {
-    return isBuild ? toBuildPaths(resolved) : resolved
+    return resolved
   }
-  let vuePath: string
+  let browserPath: string
+  let bundlerPath: string
   let compilerPath: string
   let hasLocalVue = true
   let vueVersion: string
@@ -32,10 +30,14 @@ export function resolveVue(root: string, isBuild = false): ResolvedVuePaths {
     // see if user has local vue installation
     const userVuePkg = resolve(root, 'vue/package.json')
     vueVersion = require(userVuePkg).version
-    vuePath = path.join(
+    browserPath = path.join(
       path.dirname(userVuePkg),
       'dist/vue.runtime.esm-browser.js'
     )
+    bundlerPath = path.join(
+      path.dirname(userVuePkg),
+      'dist/vue.runtime.esm-bundler.js'
+    )
 
     // also resolve matching sfc compiler
     try {
@@ -59,17 +61,20 @@ export function resolveVue(root: string, isBuild = false): ResolvedVuePaths {
   } catch (e) {
     // user has no local vue, use vite's dependency version
     hasLocalVue = false
-    vuePath = require.resolve('vue/dist/vue.runtime.esm-browser.js')
+    browserPath = require.resolve('vue/dist/vue.runtime.esm-browser.js')
+    bundlerPath = require.resolve('vue/dist/vue.runtime.esm-bundler.js')
     vueVersion = require('vue/package.json').version
     compilerPath = require.resolve('@vue/compiler-sfc')
   }
   resolved = {
-    vue: vuePath,
+    browser: browserPath,
+    bundler: bundlerPath,
     version: vueVersion,
     hasLocalVue,
-    compiler: compilerPath
+    compiler: compilerPath,
+    cdnLink: `https://unpkg.com/vue@${vueVersion}/dist/vue.esm-browser.prod.js`
   }
-  return isBuild ? toBuildPaths(resolved) : resolved
+  return resolved
 }
 
 export function resolveCompiler(cwd: string): typeof sfcCompiler {
diff --git a/src/node/serverPluginModuleResolve.ts b/src/node/serverPluginModuleResolve.ts
index 8de9876e114d39..9fedfb83a39e43 100644
--- a/src/node/serverPluginModuleResolve.ts
+++ b/src/node/serverPluginModuleResolve.ts
@@ -39,7 +39,7 @@ export const moduleResolvePlugin: Plugin = ({ root, app }) => {
 
     // special handling for vue's runtime.
     if (id === 'vue') {
-      return serve(id, resolveVue(root).vue, 'vue')
+      return serve(id, resolveVue(root).browser, 'vue')
     }
 
     // already resolved and cached
diff --git a/src/node/serverPluginServeStatic.ts b/src/node/serverPluginServeStatic.ts
index b53b9f55d685a8..9d34f3d3e58ef5 100644
--- a/src/node/serverPluginServeStatic.ts
+++ b/src/node/serverPluginServeStatic.ts
@@ -1,10 +1,11 @@
 import { Plugin } from './server'
 
+const send = require('koa-send')
 const debug = require('debug')('vite:history')
 
-export const serveStaticPlugin: Plugin = ({ root, app }) => {
-  // short circuit requests that have already been explicitly handled
+export const serveStaticPlugin: Plugin = ({ root, app, resolver }) => {
   app.use((ctx, next) => {
+    // short circuit requests that have already been explicitly handled
     if (ctx.body || ctx.status !== 404) {
       return
     }
@@ -51,5 +52,16 @@ export const serveStaticPlugin: Plugin = ({ root, app }) => {
 
   app.use(require('koa-conditional-get')())
   app.use(require('koa-etag')())
+
+  app.use((ctx, next) => {
+    const redirect = resolver.requestToFile(ctx.path)
+    if (!redirect.startsWith(root)) {
+      // resolver resolved to a file that is outside of project root,
+      // manually send here
+      return send(ctx, redirect, { root: '/' })
+    }
+    return next()
+  })
+
   app.use(require('koa-static')(root))
 }
diff --git a/src/node/serverPluginVue.ts b/src/node/serverPluginVue.ts
index 9c50420441eb99..9adba72e1af5d9 100644
--- a/src/node/serverPluginVue.ts
+++ b/src/node/serverPluginVue.ts
@@ -1,3 +1,4 @@
+import path from 'path'
 import { Plugin } from './server'
 import {
   SFCDescriptor,
@@ -209,7 +210,8 @@ function compileSFCTemplate(
   const { code, errors } = resolveCompiler(root).compileTemplate({
     source: template.content,
     filename: filePath,
-    transformAssetUrls: false,
+    // @ts-ignore
+    transformAssetUrlsBase: path.posix.dirname(publicPath),
     compilerOptions: {
       scopeId: scoped ? `data-v-${hash_sum(publicPath)}` : null,
       runtimeModuleName: '/@modules/vue'
diff --git a/src/node/utils.ts b/src/node/utils.ts
index 35f00a6730be38..138ecd7aa45cab 100644
--- a/src/node/utils.ts
+++ b/src/node/utils.ts
@@ -4,6 +4,16 @@ import LRUCache from 'lru-cache'
 import os from 'os'
 import { Context } from 'koa'
 
+export const scriptRE = /<script\b[^>]*>([\s\S]*?)<\/script>/gm
+
+const imageRE = /\.(png|jpe?g|gif|svg)(\?.*)?$/
+const mediaRE = /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/
+const fontsRE = /\.(woff2?|eot|ttf|otf)(\?.*)?$/i
+
+export const isStaticAsset = (file: string) => {
+  return imageRE.test(file) || mediaRE.test(file) || fontsRE.test(file)
+}
+
 const getETag = require('etag')
 
 interface CacheEntry {