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

Package.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 目录，然后 link 到 /docs/guide/...

Answer 2

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

该应用程序站点使用 Vue 2，它需要 VuePress 1.x，但您安装了 VuePress 2.x。如果您希望文档和应用程序源位于具有不同 NPM 依赖项的同一项目根目录中，则需要 monorepo 之类的东西。要以其他方式共享 NPM 依赖项，您必须将您的应用程序项目升级到 Vue 3 或降级 VuePress。例如，安装 VuePress 1.x 代替：
```
npm i -D vuepress@1
```
没有配置VuePress端口，所以从8080开始（直到找到空闲端口）。您应用中的文档 link 被硬编码到端口 3000，因此您的 VuePress 应该配置为从那里开始：
```
// docs/.vuepress/config.js
module.exports = {
  port: 3000
}
```
VuePress 基础 URL 未配置，而您的应用假定基础 /docs。更新您的 VuePress 配置以相应地设置基础 URL：
```
// docs/.vuepress/config.js
module.exports = {
  base: '/docs/'
}
```

See GitHub PR

对original question的回答：

VuePress 设置

在你的项目中安装vuepress：

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

为 Vuepress 添加 NPM 脚本：

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

创建 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 - 设置顶部导航栏 links.
```
// 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'
      }
    ],
  }
}
```

将 docs link 添加到应用程序的导航栏（例如，在 App.vue 中）：

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

使用以下内容创建 docs/README.md:
```
# Hello World
```

建筑

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

$ npm run build
$ npm run docs:build

发展

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

配置 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')
      })
    }
  }
}

启动应用服务器和文档服务器：
```
$ npm run serve
$ npm run docs:dev
```

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

Vue js how to use route from index.html to docs folder

vue.js

vuejs3

vuepress

VuePress 设置

建筑

发展