vuepress中如何使用路径

一、核心前提：VuePress 的路径规则

VuePress 中「绝对路径」分两种场景，核心是基于 docs/.vuepress/public 目录（没有就新建）—— 这个目录是 VuePress 的静态资源根目录，相当于前端项目的 public 文件夹～

二、场景 1：在 Markdown 中使用绝对路径（最常用）

1. 静态资源（图片 / 文件）

把资源放到 docs/.vuepress/public/ 下，比如：

plaintext

docs/.vuepress/public/
└── images/
    └── youhu-logo.png  # 你的图片

在 Markdown 里直接用 / 开头的绝对路径引用：

markdown

<!-- 正确写法 -->
![游鹄logo](/images/youhu-logo.png)

<!-- 错误写法（相对路径） -->
![游鹄logo](./images/youhu-logo.png)

2. 链接到其他页面

VuePress 中页面的绝对路径基于 docs 目录，比如：

plaintext

docs/
├── guide/
│   └── architecture.md  # 架构文档
└── README.md            # 首页

引用时用 / 开头，省略 .md 后缀：

markdown

<!-- 链接到架构文档 -->
[游鹄架构设计](/guide/architecture)

<!-- 链接到首页 -->
[返回首页](/README) 或 [返回首页](/)(推荐)

三、场景 2：在 Vue 组件 / 主题中使用绝对路径

如果是自定义主题、写 Vue 组件（比如 docs/.vuepress/components/ 下的组件），分两种情况：

1. 引用静态资源

和 Markdown 一样，基于 public 目录：

vue

<template>
  <img src="/images/youhu-logo.png" alt="游鹄logo" />
  <!-- 或用 v-bind -->
  <img :src="'/images/youhu-logo.png'" alt="游鹄logo" />
</template>

2. 配置别名（进阶：代码层面的绝对路径）

如果想在组件中用 @/xxx 这种别名（比如引用自己写的工具函数），需要修改 docs/.vuepress/config.js：

js

// docs/.vuepress/config.js
const path = require('path');

module.exports = {
  // 配置 Webpack 别名
  configureWebpack: {
    resolve: {
      alias: {
        // 把 @ 指向 docs/.vuepress/utils 目录
        '@': path.resolve(__dirname, './utils'),
        // 也可以指向项目根目录
        '~': path.resolve(__dirname, '../../')
      }
    }
  }
};

然后在组件中使用：

vue

<script>
// 引用 @/utils/youhu-helper.js
import { shardHelper } from '@/youhu-helper';

export default {
  mounted() {
    console.log(shardHelper);
  }
};
</script>

四、避坑小提醒（敲黑板✨）

1. public 目录下的文件，引用时必须以 / 开头，比如 /images/logo.png，不能写 public/images/logo.png；
2. Windows 系统路径分隔符是 \，但在 VuePress 中统一用 /；
3. 如果部署到非根目录（比如 https://xxx.com/youhu-docs/），需要在 config.js 中配置 base: '/youhu-docs/'，此时绝对路径要带上 base，比如 /youhu-docs/images/logo.png。