vue3项目中内嵌vuepress工程两种实现方式

news2024/11/14 14:37:09

一、示例

vue项目，点击用户手册按钮，通过a标签跳转到vuepress框架搭建的页面。点击后者通过路由跳转，iframe实现。

在这里插入图片描述

二、创建vuepress工程

1、通过官网生成vuepress工程（注：若运行报错，需升级node版本20+，官网提供的18参考有误），config文件的配置如下：

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  description: '使用说明',
  dest: '../public/docs', // 打包路径为vue项目的public下
  base: '/docs/',
  lang: 'zh-CN',
  bundler: viteBundler({
    viteOptions: {},
    vuePluginOptions: {},
  }),
  theme: defaultTheme({
    navbar: false,
    sidebarDepth: 3, // 包含四级<h4>标题
    sidebar: 'heading',
  }),
})

2、本项目介绍的是简单的使用说明页面，目录如下：
在这里插入图片描述
3、index.md为页面内容，media文件夹为所有图片
使用说明的内容是产品给的word通过pandoc转的md。具体步骤可参考word转md的方法

三、配置vue项目的打包命令

package.json的scripts：其中执行npm run build:witgDocs可一步到位，完成打包。若执行npm run build，则先需要在vuepress工程下执行打包命令npm run docs:build，再在vue项目执行npm run build。
（ps: build:withDocs实质上是切换目录，执行打包，切换目录再打包）

 { 
 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:withDocs": "cd docs & npm run docs:build & cd .. & vite build",
    "preview": "vite preview"
  }
 }

vue项目的按钮，本地运行vue项目，需要先将vuepress项目打包到public下
在这里插入图片描述

四、通过iframe嵌套实现过程

1、router.js文件

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("@/page/index.vue"),
    },
    {
      path: "/use",
      name: "use",
      component: () => import("@/page/components/use.vue"),
    },
  ],
});

export default router;

2、use.vue页面

<template>
  <div class="container">
    <iframe
      src="docs/index.html"
      frameborder="0"
      height="100%"
      width="100%"
      allow="fullscreen"
    ></iframe>
    <!-- 用户手册 -->
  </div>
</template>

<script setup>
</script>

五、将vue项目打包，启本地服务运行index.html

vue项目打包后的index.html不能直接打开，直接运行会出现空白。因此，通过express搭建本地服务器
1、在dist 路径下，安装express

 npm install express

2、在dist文件中添加服务器app.js文件

var express = require("express");
var app = express();
const hostname = "localhost";
const port = 8080;
// Express 提供了内置的中间件 express.static 来设置静态文件
app.use(express.static("./"));
app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}`);
});