如何将Retype生成的静态文档部署到Vue路由的/docs路径下？

问题原因 #

直接将Retype生成的文档移入Vue静态文件夹后内部跳转异常，是因为Retype默认生成的链接基于根路径，和Vue项目的/docs路由前缀不匹配，导致跳转路径错误。

解决步骤 #

1. 配置Retype的基础路径

在Retype项目的retype.yml配置文件中添加base字段，指定文档的基础路径为/docs：

base: /docs

执行retype build重新生成文档，此时所有内部链接、资源路径都会自动加上/docs前缀，和目标路由匹配。

2. 部署Retype文档到Vue静态目录

将Retype生成的输出文件（默认在dist或指定输出目录）全部复制到Vue项目的public/docs文件夹下。Vue的public目录是静态资源目录，文件会被直接部署，不会被webpack编译处理。

3. 配置开发/生产环境的路由 fallback

开发环境（Vue CLI）

在项目根目录的vue.config.js中添加devServer配置，让/docs开头的请求直接映射到静态文件：

module.exports = {
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/docs\/.*$/, to: context => context.parsedUrl.pathname }
      ]
    }
  }
}

生产环境（以Nginx为例）

在Nginx配置文件中添加/docs的location规则，优先处理文档请求：

location /docs {
  alias /path/to/your/vue-project/dist/docs;
  try_files $uri $uri/ =404;
}

location / {
  try_files $uri $uri/ /index.html;
}

这样Nginx会直接返回/docs路径下的静态文档，其他路径交给Vue SPA处理。

完成以上配置后，访问<main_url>/docs即可打开文档首页，内部章节跳转也会正常工作，同时不影响原有Vue路由（/和/builder）的使用。

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