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

2024/11/13 15:42:59 来源：https://blog.csdn.net/xiaopiaoliang777/article/details/143631179 浏览: 次关键词：vue3项目中内嵌vuepress工程两种实现方式

一、示例

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"><iframesrc="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}`);
});