静态资源处理
- 相关: 公共基础路径
- 相关:
例如,imgUrl
在开发时会是 /img.png
,在生产构建后会是 /assets/img.2d8efhg.png
。
行为类似于 Webpack 的 file-loader
。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。
如果 Vite 使用了 Vue 插件,Vue SFC 模板中的资源引用都将自动转换为导入。
引用的资源作为构建资源图的一部分包括在内,将生成散列文件名,并可以由插件进行处理以进行优化。
较小的资源体积小于
assetsInlineLimit
选项值 则会被内联为 base64 data URL。
未被包含在内部列表中的、或者在 assetsInclude
中的资源,可以使用 后缀显式导入为一个 URL。这十分有用,例如,要导入 时:
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
资源可以使用 ?raw
后缀声明作为字符串引入。
// 在生产构建中将会分离出 chunk
const worker = new Worker()
// 内联为 base64 字符串
查看 Web Worker 小节 获取更多细节。
如果你有下列这些资源:
- 不会被源码引用(例如
robots.txt
) - 必须保持原有文件名(没有经过 hash)
- …或者你只是不想为了获取 URL 而首先导入该资源
那么你可以将该资源放在一个特别的 public
目录中,它应位于你的项目根目录。该目录中的资源应该在开发时能直接通过 /
根路径访问到,并且打包时会被完整复制到目标目录的根目录下。
目录默认是 <root>/public
,但可以通过 来配置。
- 引入
public
中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png
应该在源码中被引用为/icon.png
。