Skip to content

静态资源处理

资源文件URL

在页面中引入资源文件,建议用绝对路径(以 / 开头)引入。

你可以在 pipflow.config.js 配置文件中设置路径别名,在页面内通过别名+路径引入文件,编译阶段会被统一静态替换。

json
// pipflow.config.json
{
  "alias": {
    "@img": "/assets/images",
    "@css": "/styles"
  }
}
// pipflow.config.json
{
  "alias": {
    "@img": "/assets/images",
    "@css": "/styles"
  }
}
html
<!-- demo.html -->
<img src="@img/background.png">

<!-- 构建后的内容 -->
<img src="/assets/images/background.png">
<!-- demo.html -->
<img src="@img/background.png">

<!-- 构建后的内容 -->
<img src="/assets/images/background.png">

public 目录

如果你有下列这些资源:

  • 不会被源码引用(例如 robots.txt)
  • 必须保持原有文件名(没有经过 hash)
  • ...或者你压根不想引入该资源,只是想得到其 URL。

那么你可以将该资源放在指定的 public 目录中,它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。

目录默认是 <root>/public,但可以通过 publicDir 选项 来配置。 请参见 这里

请注意

引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png

文件指纹

静态文件指纹是为了解决缓存问题,可以帮助优化浏览器缓存和文件更新的管理。它可以确保用户获得最新的文件版本,同时提高网站的性能和用户体验。

如果你在配置文件中开启了文件指纹,则在 build 之后引入的文件路径会携带文件指纹(以文件名或url参数形式)。仅在 build 阶段有效。

关于 build.fileHash 配置请参见 这里

Released under the MIT License.