vite中静态资源的处理

发布时间 2023-09-26 21:40:06作者: yunChuans

public目录

public 目录是存放静态资源的一种方式。

2.项目初始化时默认public作为静态资源服务的文件夹。我们可以在vite.config.js中修改publicDir。

3.该目录中的文件开发期间在 / 处提供,并在构建期间将public文件夹下的文件(不包含public本身)复制到outDir 的根目录。

4.public下的文件会被完整复制到目标目录的根目录下,保持原有文件名,不会被hash。

在开发时我们可以使用 / 开头直接访问public 目录下的资源。在vite项目中,运行的时候,其实是打包后的代码。所以,图片需要的是打包后的图片路径。

当项目部署在嵌套的公共路径下,我们需要指定 base 配置项,由 JS 引入的资源 URL,CSS 中的 url() 引用以及 .html 文件中引用的资源在构建过程中都会自动调整,以适配此选项。

image

上面的资源在构建后会变为

image

当访问过程中需要使用动态连接的 url 时,不能被自动调整,可以使用全局注入的 import.meta.env.BASE_URL 变量,它的值为公共基础路径。

assets文件夹

Vite 中,项目的静态资源文件(如图片、字体、样式表等)会在打包构建时被处理并放置在输出目录中。默认情况下,这些静态资源文件会被放置在输出目录的根目录下的 "assets" 文件夹中。输出目录的默认名称是 "dist",但你可以在项目的配置文件中进行自定义设置。