diff --git a/README.md b/README.md
index 5bddab5918e4e3..1bd0732d69aeed 100644
--- a/README.md
+++ b/README.md
@@ -129,9 +129,11 @@ Both CSS and JSON imports also support Hot Module Replacement.
 
 You can reference static assets in your `*.vue` templates, styles and plain `.css` files either using absolute public paths (based on project root) or relative paths (based on your file system). The latter is similar to the behavior you are used to if you have used `vue-cli` or webpack's `file-loader`.
 
-There is no conventional `public` directory. All referenced assets, including those using absolute paths, will be copied to the dist folder with a hashed file name in the production build. Never-referenced assets will not be copied.
+All referenced assets, including those using absolute paths, will be copied to the dist folder with a hashed file name in the production build. Never-referenced assets will not be copied. Similar to `vue-cli`, image assets smaller than 4kb will be base64 inlined.
 
-Similar to `vue-cli`, image assets smaller than 4kb will be base64 inlined.
+The exception is the `public` directory - assets placed in this directory will be copied to the dist directory as-is. It can be used to provide assets that are never referenced in your code - e.g. `robots.txt`.
+
+All path references, including absolute paths and those starting with `/public`, should be based on your working directory structure. If you are deploying your project under a nested public path, simply specify `--base=/your/public/path/` and all asset paths will be rewritten accordingly. **You never need to think about the public path during development.**
 
 ### PostCSS
 
diff --git a/playground/TestAssets.vue b/playground/TestAssets.vue
index 9c78bc3a198c16..40022ffa298a5a 100644
--- a/playground/TestAssets.vue
+++ b/playground/TestAssets.vue
@@ -3,6 +3,9 @@
   <p>
     Fonts should be italic if font asset reference from CSS works.
   </p>
+  <p class="asset-import">
+    Path for assets import from js: <code>{{ filepath }}</code>
+  </p>
   <p>
     Relative asset reference in template:
     <img src="./testAssets.png" style="width: 30px;" />
@@ -19,6 +22,18 @@
   </div>
 </template>
 
+<script>
+import filepath from './testAssets.png'
+
+export default {
+  data() {
+    return {
+      filepath
+    }
+  }
+}
+</script>
+
 <style>
 @font-face {
   font-family: 'Inter';
diff --git a/src/node/build/buildPluginAsset.ts b/src/node/build/buildPluginAsset.ts
index f88d4b9eddc380..da2e68c31895cd 100644
--- a/src/node/build/buildPluginAsset.ts
+++ b/src/node/build/buildPluginAsset.ts
@@ -9,8 +9,8 @@ import mime from 'mime-types'
 const debug = require('debug')('vite:build:asset')
 
 interface AssetCacheEntry {
-  content: Buffer
-  fileName: string
+  content: Buffer | null
+  fileName: string | null
   url: string
 }
 
@@ -18,6 +18,7 @@ const assetResolveCache = new Map<string, AssetCacheEntry>()
 
 export const resolveAsset = async (
   id: string,
+  root: string,
   publicBase: string,
   assetsDir: string,
   inlineLimit: number
@@ -27,27 +28,43 @@ export const resolveAsset = async (
     return cached
   }
 
-  const ext = path.extname(id)
-  const baseName = path.basename(id, ext)
-  const resolvedFileName = `${baseName}.${hash_sum(id)}${ext}`
+  let resolved: AssetCacheEntry | undefined
 
-  let url = slash(path.join(publicBase, assetsDir, resolvedFileName))
-  const content = await fs.readFile(id)
-  if (!id.endsWith(`.svg`) && content.length < inlineLimit) {
-    url = `data:${mime.lookup(id)};base64,${content.toString('base64')}`
+  const pathFromRoot = path.relative(root, id)
+  if (/^public(\/|\\)/.test(pathFromRoot)) {
+    // assets inside the public directory will be copied over verbatim
+    // so all we need to do is just append the baseDir
+    resolved = {
+      content: null,
+      fileName: null,
+      url: slash(path.join(publicBase, pathFromRoot))
+    }
   }
 
-  const resolved = {
-    content,
-    fileName: resolvedFileName,
-    url
+  if (!resolved) {
+    const ext = path.extname(id)
+    const baseName = path.basename(id, ext)
+    const resolvedFileName = `${baseName}.${hash_sum(id)}${ext}`
+
+    let url = slash(path.join(publicBase, assetsDir, resolvedFileName))
+    const content = await fs.readFile(id)
+    if (!id.endsWith(`.svg`) && content.length < inlineLimit) {
+      url = `data:${mime.lookup(id)};base64,${content.toString('base64')}`
+    }
+
+    resolved = {
+      content,
+      fileName: resolvedFileName,
+      url
+    }
   }
+
   assetResolveCache.set(id, resolved)
   return resolved
 }
 
 export const registerAssets = (
-  assets: Map<string, string>,
+  assets: Map<string, Buffer>,
   bundle: OutputBundle
 ) => {
   for (const [fileName, source] of assets) {
@@ -61,22 +78,27 @@ export const registerAssets = (
 }
 
 export const createBuildAssetPlugin = (
+  root: string,
   publicBase: string,
   assetsDir: string,
   inlineLimit: number
 ): Plugin => {
-  const assets = new Map()
+  const assets = new Map<string, Buffer>()
+
   return {
     name: 'vite:asset',
     async load(id) {
       if (isStaticAsset(id)) {
         const { fileName, content, url } = await resolveAsset(
           id,
+          root,
           publicBase,
           assetsDir,
           inlineLimit
         )
-        assets.set(fileName, content)
+        if (fileName && content) {
+          assets.set(fileName, content)
+        }
         debug(`${id} -> ${url.startsWith('data:') ? `base64 inlined` : url}`)
         return `export default ${JSON.stringify(url)}`
       }
diff --git a/src/node/build/buildPluginCss.ts b/src/node/build/buildPluginCss.ts
index 469f584a58e03e..ae6f5b773e45f3 100644
--- a/src/node/build/buildPluginCss.ts
+++ b/src/node/build/buildPluginCss.ts
@@ -16,7 +16,7 @@ export const createBuildCssPlugin = (
   inlineLimit: number
 ): Plugin => {
   const styles: Map<string, string> = new Map()
-  const assets = new Map()
+  const assets = new Map<string, Buffer>()
 
   return {
     name: 'vite:css',
@@ -36,11 +36,14 @@ export const createBuildCssPlugin = (
               const file = path.join(fileDir, rawUrl)
               const { fileName, content, url } = await resolveAsset(
                 file,
+                root,
                 publicBase,
                 assetsDir,
                 inlineLimit
               )
-              assets.set(fileName, content)
+              if (fileName && content) {
+                assets.set(fileName, content)
+              }
               debug(
                 `url(${rawUrl}) -> ${
                   url.startsWith('data:') ? `base64 inlined` : `url(${url})`
diff --git a/src/node/build/buildPluginHtml.ts b/src/node/build/buildPluginHtml.ts
index c6c914d1fd6fa7..252e98e268c682 100644
--- a/src/node/build/buildPluginHtml.ts
+++ b/src/node/build/buildPluginHtml.ts
@@ -16,6 +16,7 @@ import MagicString from 'magic-string'
 import { InternalResolver } from '../resolver'
 
 export const createBuildHtmlPlugin = async (
+  root: string,
   indexPath: string | null,
   publicBasePath: string,
   assetsDir: string,
@@ -31,6 +32,7 @@ export const createBuildHtmlPlugin = async (
 
   const rawHtml = await fs.readFile(indexPath, 'utf-8')
   let { html: processedHtml, js } = await compileHtml(
+    root,
     rawHtml,
     publicBasePath,
     assetsDir,
@@ -111,6 +113,7 @@ const assetAttrsConfig: Record<string, string[]> = {
 // compile index.html to a JS module, importing referenced assets
 // and scripts
 const compileHtml = async (
+  root: string,
   html: string,
   publicBasePath: string,
   assetsDir: string,
@@ -176,6 +179,7 @@ const compileHtml = async (
     const value = attr.value!
     const { url } = await resolveAsset(
       resolver.requestToFile(value.content),
+      root,
       publicBasePath,
       assetsDir,
       inlineLimit
diff --git a/src/node/build/index.ts b/src/node/build/index.ts
index 2fc05374cb1ffc..73b6d574637d00 100644
--- a/src/node/build/index.ts
+++ b/src/node/build/index.ts
@@ -161,6 +161,7 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
   const resolver = createResolver(root, resolvers)
 
   const { htmlPlugin, renderIndex } = await createBuildHtmlPlugin(
+    root,
     indexPath,
     publicBasePath,
     assetsDir,
@@ -220,7 +221,12 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
         assetsInlineLimit
       ),
       // vite:asset
-      createBuildAssetPlugin(publicBasePath, assetsDir, assetsInlineLimit),
+      createBuildAssetPlugin(
+        root,
+        publicBasePath,
+        assetsDir,
+        assetsInlineLimit
+      ),
       // minify with terser
       // this is the default which has better compression, but slow
       // the user can opt-in to use esbuild which is much faster but results
@@ -265,6 +271,7 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
     await fs.remove(outDir)
     await fs.ensureDir(outDir)
 
+    // write js chunks and assets
     for (const chunk of output) {
       if (chunk.type === 'chunk') {
         // write chunk
@@ -300,6 +307,12 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
         WriteType.HTML
       )
     }
+
+    // copy over /public if it exists
+    const publicDir = path.resolve(root, 'public')
+    if (await fs.pathExists(publicDir)) {
+      await fs.copy(publicDir, path.resolve(outDir, 'public'))
+    }
   }
 
   if (!silent) {
diff --git a/src/node/server/index.ts b/src/node/server/index.ts
index 31c3b6b54af97c..cafb374b7bdc2f 100644
--- a/src/node/server/index.ts
+++ b/src/node/server/index.ts
@@ -9,6 +9,7 @@ import { hmrPlugin, HMRWatcher } from './serverPluginHmr'
 import { serveStaticPlugin } from './serverPluginServeStatic'
 import { jsonPlugin } from './serverPluginJson'
 import { cssPlugin } from './serverPluginCss'
+import { assetPathPlugin } from './serverPluginAssets'
 import { esbuildPlugin } from './serverPluginEsbuild'
 
 export { Resolver }
@@ -44,6 +45,7 @@ const internalPlugins: Plugin[] = [
   esbuildPlugin,
   jsonPlugin,
   cssPlugin,
+  assetPathPlugin,
   hmrPlugin,
   serveStaticPlugin
 ]
diff --git a/src/node/server/serverPluginAssets.ts b/src/node/server/serverPluginAssets.ts
new file mode 100644
index 00000000000000..5d23b0ac063016
--- /dev/null
+++ b/src/node/server/serverPluginAssets.ts
@@ -0,0 +1,13 @@
+import { Plugin } from '.'
+import { isImportRequest, isStaticAsset } from '../utils'
+
+export const assetPathPlugin: Plugin = ({ app }) => {
+  app.use(async (ctx, next) => {
+    if (isStaticAsset(ctx.path) && isImportRequest(ctx)) {
+      ctx.type = 'js'
+      ctx.body = `export default ${JSON.stringify(ctx.path)}`
+      return
+    }
+    return next()
+  })
+}
diff --git a/src/node/utils/pathUtils.ts b/src/node/utils/pathUtils.ts
index 87a5bb6daf2e3f..f0461311510c60 100644
--- a/src/node/utils/pathUtils.ts
+++ b/src/node/utils/pathUtils.ts
@@ -32,13 +32,19 @@ export const isStaticAsset = (file: string) => {
   return imageRE.test(file) || mediaRE.test(file) || fontsRE.test(file)
 }
 
+const timeStampRE = /(&|\?)t=\d+/
+const jsSrcFileRE = /\.(vue|jsx?|tsx?)$/
+
 /**
  * Check if a request is an import from js (instead of fetch() or ajax requests)
- * A request qualifies as long as it's not from page (no ext or .html).
- * this is because non-js files can be transformed into js and import json
- * as well.
+ * A request qualifies as long as it's from one of the supported js source file
+ * formats (vue,js,ts,jsx,tsx)
  */
-export const isImportRequest = (ctx: Context) => {
-  const referer = cleanUrl(ctx.get('referer'))
-  return /\.\w+$/.test(referer) && !referer.endsWith('.html')
+export const isImportRequest = (ctx: Context): boolean => {
+  if (!ctx.accepts('js')) {
+    return false
+  }
+  // strip HMR timestamps
+  const referer = ctx.get('referer').replace(timeStampRE, '')
+  return jsSrcFileRE.test(referer)
 }
diff --git a/test/test.js b/test/test.js
index 1fa14016b42265..1ce7052cb12f38 100644
--- a/test/test.js
+++ b/test/test.js
@@ -73,6 +73,16 @@ describe('vite', () => {
       expect(has404).toBe(false)
     })
 
+    test('asset import from js', async () => {
+      expect(await getText('.asset-import')).toMatch(
+        isBuild
+          ? // hashed in production
+            /\/assets\/testAssets\.([\w\d]+)\.png$/
+          : // only resolved to absolute in dev
+            '/testAssets.png'
+      )
+    })
+
     test('env variables', async () => {
       expect(await getText('.dev')).toMatch(`__DEV__: ${!isBuild}`)
       expect(await getText('.node_env')).toMatch(