静态资源

相对路径

所有的 Markdown 文件都会被 webpack 编译成 Vue 组件,因此你可以,并且应该更倾向于使用相对路径(Relative URLs)来引用所有的静态资源:

  1. ![An image](./image.png)

同样地,这在 *.vue 文件的模板中一样可以工作,图片将会被 url-loaderfile-loader 处理,在运行生成静态文件的构建任务时,文件会被复制到正确的位置。

除此之外,你也使用 ~ 前缀来明确地指出这是一个 webpack 的模块请求,这将允许你通过 webpack 别名来引用文件或者 npm 的依赖:

  1. ![Image from alias](~@alias/image.png)
  2. ![Image from dependency](~some-dependency/image.png)

Webpack 的别名可以通过 .vuepress/config.jsconfigureWebpack 来配置,如:

  1. module.exports = {
  2. configureWebpack: {
  3. resolve: {
  4. alias: {
  5. '@alias': 'path/to/some/dir'
  6. }
  7. }
  8. }
  9. }

公共文件

有时,你可能需要提供一个静态资源,但是它们并不直接被你的任何一个 markdown 文件或者主题组件引用 —— 举例来说,favicons 和 PWA 的图标,在这种情形下,你可以将它们放在 .vuepress/public 中, 它们最终会被复制到生成的静态文件夹中。

基础路径

如果你的网站会被部署到一个非根路径,你将需要在 .vuepress/config.js 中设置 base,举例来说,如果你打算将你的网站部署到 https://foo.github.io/bar/,那么 base 的值就应该被设置为 "/bar/" (应当总是以斜杠开始,并以斜杠结束)。

有了基础路径(Base URL),如果你希望引用一张放在 .vuepress/public 中的图片,你需要使用这样路径:/bar/image.png,然而,一旦某一天你决定去修改 base,这样的路径引用将会显得异常脆弱。为了解决这个问题,VuePress 提供了内置的一个 helper $withBase(它被注入到了 Vue 的原型上),可以帮助你生成正确的路径:

  1. <img :src="$withBase('/foo.png')" alt="foo">

值得一提的是,你不仅可以在你的 Vue 组件中使用上述的语法,在 Markdown 文件中亦是如此。

最后补充一句,一个 base 路径一旦被设置,它将会自动地作为前缀插入到 .vuepress/config.js 中所有以 / 开始的资源路径中。