配置base参数的Vuepress站点页面刷新出现404错误如何解决

解决方案 #

1. 确认静态资源存放路径

所有通过根路径引用的静态资源都需要存放在 docs/.vuepress/public 目录下，请先确认你的 my-image-logo.png 已放在该路径下。

2. 修正 themeConfig.logo 配置

VuePress 默认主题会自动给以 / 开头的静态资源路径拼接你配置的 base 参数，直接修改 docs/.vuepress/config.js 配置即可：

themeConfig: {
    logo: '/my-image-logo.png',
}

如果是自定义主题没有内置自动拼接base的逻辑，可以在配置文件中主动引入工具方法处理：

// VuePress 2.x 示例
import { withBase } from '@vuepress/client'

export default {
  base: '/some/sub/directory/path/',
  themeConfig: {
    logo: withBase('/my-image-logo.png')
  }
}

3. 确认首页 heroImage 配置

你当前的 heroImage: /my-image-logo.png 配置是符合要求的，VuePress 会自动拼接 base 参数，无需额外修改。

以上配置完成后，不管在首页还是子路由页面刷新，框架都会自动将资源路径解析为 ${base}my-image-logo.png，不会出现404问题。

内容的提问来源于stack exchange，提问作者user8072194