资源引入

Vite中，对于静态资源的引入有两种方式，一种是在代码中使用import以模块化方式引入，另一种是将静态资源放在public文件夹中，这篇笔记我们简单介绍一下。

public文件夹

初始化Vite工程后，工程模板通常会为我们在项目根目录创建一个名为public的文件夹，它是一个特殊的目录，里面的文件会原封不动的被复制到最终构建目录（通常是dist）。访问这些资源时，通常需要使用基于根路径的静态路径，例如public/favicon.ico可以通过/favicon.ico访问。

放在public文件夹内的静态资源不经过Vite的打包处理，构建后文件将保持原样复制到构建输出。这种方式适合处理不会改动、且需要用固定路径访问的资源，如favicon.ico、robots.txt、外部访问的静态文件等。这些资源不会自动处理缓存破坏（不会自动添加hash值），也不支持通过import语法动态引用。

下面例子中，我们在应用的入口HTML文件中引入了favicon.ico资源。

|_ public
  |_ favicon.ico

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

import引入资源

导入媒体文件资源

Vite中import可以通过模块化的方式将静态资源作为模块导入，得到的是该资源的最终经过处理的URL。

import avatarUrl from "@/assets/avatar.png";

const App = () => {
  return (
    <>
      <img src={avatarUrl} alt="avatar" />
    </>
  );
};

export default App;

虽然在开发环境我们可能会看到页面上引入的依然是类似/assets/avatar.png，但使用npm run build构建后我们会发现最终得到的URL格式是被处理过的，形如/assets/avatar-BXMjREEu.png。

Vite中，常见的图像、媒体和字体文件类型都被自动检测为资源，它们都会以URL方式处理导入，我们也可以通过配置中的assetsInclude选项扩展支持的后缀名列表。

导入JSON

Vite也支持导入JSON，导入的结果是JSON的JavaScript对象。

import jsonData from "@/assets/example.json";
import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    console.log(jsonData);
  }, []);

  return <></>;
};

export default App;

对于JSON，Vite也支持基于JSON字段的具名导入，下面是一个例子。

import { data } from "@/assets/example.json";

作者：Gacfox