Vue js 如何使用从 index.html 到 docs 文件夹的路由 VuePress 设置建筑开发

如何解决Vue js 如何使用从 index.html 到 docs 文件夹的路由 VuePress 设置建筑开发

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

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

我想从使用 vue.js 创建的 main.js 和包含 Markdown 文件的 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"
  },}

解决方法

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

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，使其与服务器上的预期目标匹配（例如，如果将文档部署到 docs，则将基本 URL 设置为 https://example.com/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
   

,

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