Vue js如何使用从index.html到docs文件夹的路由

Question

我是 Vue js 的新手，我正在使用 Vue js 构建一个网站，其中有一个主页和 docs 文件夹，其中包含许多编写并保存在 .md 文件中的文档。

现在如何在导航栏上单击从我的 route.js 页面重定向到文档 .md 文件。下面是我的文件夹结构。

我想从使用 vue.js 创建的 main.js 和包含降价文件的 docs 文件夹提供我的主页。在docs 文件夹内有.vuepress 和config.js，配置为加载index.md 作为主页。

 - docs
    - guide
      - index.md

 - src
   - components 
   - route.js
   - vue.config.js
   - main.js

包.json

{
  "scripts": {
    "docs:build": "vuepress build docs",
    "docs:dev": "vuepress dev docs",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "start": "vue-cli-service serve"
  },
}

Answer 1

您可以将 docs 文件夹添加到 public 目录中，然后链接到 /docs/guide/...

Answer 2

更新：您的新代码存在一些问题：

1. 应用程序站点使用 Vue 2，它需要 VuePress 1.x，但您安装了 VuePress 2.x。如果您希望文档和应用程序源位于具有不同 NPM 依赖项的同一项目根目录中，则需要 monorepo 之类的东西。要以其他方式共享 NPM 依赖项，您必须将应用项目升级到 Vue 3 或降级 VuePress。举例来说，请安装 VuePress 1.x：

   npm i -D vuepress@1
   

2. VuePress 端口未配置，因此从 8080 开始（直到找到空闲端口）。您的应用程序中的文档链接被硬编码到端口 3000，因此您的 VuePress 应该配置为从那里开始：

   // docs/.vuepress/config.js
   module.exports = {
     port: 3000
   }
   

3. VuePress 基础 URL 未配置，而您的应用假定基础为 /docs。更新您的 VuePress 配置以相应地设置基本 URL：

   // docs/.vuepress/config.js
   module.exports = {
     base: '/docs/'
   }
   

See GitHub PR

---

回复original question：

VuePress 设置

1. 在您的项目中安装vuepress：

   $ npm i -D vuepress       # if using @vue/cli@4
   $ npm i -D vuepress@next  # if using @vue/cli@5
   

2. 为 Vuepress 添加 NPM 脚本：

   // package.json
   {
     "scripts": {
       "docs:build": "vuepress build docs",
       "docs:dev": "vuepress dev docs"
     }
   }
   

3. 创建docs/.vuepress/config.js，并导出一个配置对象：

   一个。 dest - 将文档输出到应用的构建输出目录（dist 用于 Vue CLI 脚手架项目）。

   b. base - 设置基本 URL，使其与服务器上的预期目标匹配（例如，如果将文档部署到 https://example.com/docs/，则将基本 URL 设置为 docs）。

   c。 port - 设置 VuePress 开发服务器的端口（稍后我们将配置 Vue CLI 的开发服务器指向那里）。

   d。 themeConfig.nav - 设置顶部导航栏链接。

   // docs/.vuepress/config.js
   module.exports = {
     dest: 'dist/docs',
     title: 'My Project Docs',
     base: '/docs/',
     port: 3000,
     themeConfig: {
       nav: [
         {
           text: 'Guide',
           link: '/guide/',
         },
         {
           text: 'Main Project',
           link: 'http://localhost:8080'
         }
       ],
     }
   }
   

4. 将docs 链接添加到您应用的导航栏（例如，在App.vue 中）：

   <nav>
     <a href="/docs">Docs</a> ?
     <router-link to="/">Home</router-link>
     ...
   </nav>
   

5. 使用以下内容创建docs/README.md：

   # Hello World
   

建筑

在文档之前构建您的应用程序（特别是如果应用程序的构建命令事先删除了输出目录，就像使用 Vue CLI 一样）：

$ npm run build
$ npm run docs:build

发展

如果使用 Vue CLI，请将开发服务器配置为将 /docs 重定向到 VuePress 开发服务器：

1. 配置 Vue CLI 的 devServer.before:

   // vue.config.js
   module.exports = {
     devServer: {
       before: app => {
         // point `/docs` to VuePress dev server, configured above
         app.get('/docs', (req, res) => {
           res.redirect('http://localhost:3000/docs')
         })
       }
     }
   }
   

2. 启动应用服务器和文档服务器：

   $ npm run serve
   $ npm run docs:dev