静态资源处理 ​

显式 URL 引入 ​

未被包含在内部列表或 assetsInclude 中的资源，可以使用 ?url 后缀显式导入为一个 URL。这十分有用，例如，要导入 Houdini Paint Worklets 时：

import 
workletURL
 from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(
workletURL
)

显式内联处理 ​

可以分别使用 ?inline 或 ?no-inline 后缀，明确导入带内联或不带内联的静态资源。

import 
imgUrl1
 from './img.svg?no-inline'
import 
imgUrl2
 from './img.png?inline'

将资源引入为字符串 ​

资源可以使用 ?raw 后缀声明作为字符串引入。

import 
shaderString
 from './shader.glsl?raw'

导入脚本作为 Worker ​

脚本可以通过 ?worker 或 ?sharedworker 后缀导入为 web worker。

// 在生产构建中将会分离出 chunk
import 
Worker
 from './shader.js?worker'
const 
worker
 = new 
Worker
()

// sharedworker
import 
SharedWorker
 from './shader.js?sharedworker'
const 
sharedWorker
 = new 
SharedWorker
()

// 内联为 base64 字符串
import 
InlineWorker
 from './shader.js?worker&inline'

查看 Web Worker 小节 获取更多细节。

public 目录 ​

如果你有下列这些资源：

• 不会被源码引用（例如 robots.txt ）
• 必须保持原有文件名（没有经过 hash）
• ...或者你压根不想引入该资源，只是想得到其 URL。

那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

目录默认是 <root>/public ，但可以通过 publicDir 选项 来配置。

请注意，应该始终使用根绝对路径来引入 public 中的资源 —— 举个例子， public/icon.png 应该在源码中被引用为 /icon.png 。

new URL(url, import.meta.url) ​

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！

这个模式同样还可以通过字符串模板支持动态 URL：

function getImageUrl(name) {
  // 请注意，这不包括子目录中的文件
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href

import __img0png from './dir/img0.png'
import __img1png from './dir/img1.png'
function getImageUrl(name) {
  const modules = {
    './dir/img0.png': __img0png,
    './dir/img1.png': __img1png,