静态资源

存放

存放在 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 languages = ["am", "ar", "az", "be", "en", "es", "fr", "hk", "jp", "kk", "kr", "ro", "sr", "tr", "uk", "ur", "uz", "zh"]
  
  const langModules = {}
  for (const lang of languages) {
    import(`./lang/${lang}.js`).then(module => {
      langModules[lang] = module.default
    })
  }
  
  export default langModules

  // 创建一个函数，用于导入所有在指定目录中的模块
  const modules = {}
  const files = import.meta.glob("./lang/*.js", {
    import: "default",
    eager: true,
  })
  for (const path in files) {
    const moduleName = path.replace(/^\.\/lang\/(.*)\.js$/, "$1")
    const module = files[path]
    modules[moduleName] = module
  }
  export default modules

• 同步

  const modules = import.meta.globEager("./lang/*.js")
  const lang = {}
  for (const path in modules) {
    const name = path.replace(/^\.\/lang\/(.*)\.js$/, "$1")
    lang[name] = modules[path].default
  }
  console.log(lang)
  export default lang

转移成

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 ...）