静态资源

存放

存放在 src/assets 下

导入

• 正常导入会返回解析后的 URL

  import img fron './img.png'
  

• 以字符串形式加载资源

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

• 加载为 Web Worker

  import Worker from './worker.js?worker'
  

JSON

支持具名导入

import { field } from './example.json'

Glob 导入

• 异步

  const modules = import.meta.glob('./dir/*.js')
  // 通过 Promise 形式获取
  for (const path in modules) {
    modules[path]().then((mod) => {
      console.log(path, mod)
    })
  }
  

• 同步

  const modules = import.meta.globEager('./dir/*.js')
  
  for (const path in modules) {
  	console.log(modules[path].default)
  }
  

转移成

import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1
}

这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准

必须是相对路径（以 ./ 开头，相对于项目根目录解析）

Glob 导入只能使用默认导入（无法使用按名导入，也无法使用 import * as ...）