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

目录

  • 一、示例
  • 二、创建vuepress工程
  • 三、配置vue项目的打包命令
  • 四、 通过iframe嵌套实现过程
  • 五、 将vue项目打包,启本地服务运行index.html

一、示例

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

3、命令行或是在终端运行(如右键git bash或vscode)

node app.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470336.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简述 synchronized 和 java.util.concurrent.locks.Lock 的异同?

大家好&#xff0c;我是锋哥。今天分享关于【简述 synchronized 和 java.util.concurrent.locks.Lock 的异同&#xff1f;】面试题。希望对大家有帮助&#xff1b; 简述 synchronized 和 java.util.concurrent.locks.Lock 的异同&#xff1f; 在Java编程中&#xff0c;synchro…

centos7上安装mysql

1.现查看虚拟机上有没有wget包&#xff0c;如果没有的话进行安装 yum install -y wget 2.进入MySQL :: Download MySQL Yum Repository下载mysql安装源 找到与linux相应的版本&#xff0c;复制地址&#xff0c;如果找不到地址&#xff0c;可以复制如下 3.下载mysql官方yum源 …

操作系统离散存储练习题

1. (简答题)分页存储管理系统具有快表&#xff0c;内存访问时间为2ns&#xff0c;检索快表时间为0.5ns&#xff0c;快表命中率为80%&#xff0c;求有效访问时间 -分析&#xff1a;首先访问缓存&#xff08;快表&#xff09;&#xff0c;如果没有找到访问内存&#xff08;页表&…

PHP搭建开发环境(Windows系统)

要搭建一个完整的PHP动态网站&#xff0c;离不开操作系统、Web服务器、数据库、和PHP软件。 虽然有不错方便的方式&#xff0c;比如使用phpstudio等等等等许多面板都是非常快速不错的方式&#xff0c;但是这里是教会大家如何配置而不只是依赖别人整合好的面板软件&#xff0c;…

开源 2 + 1 链动模式、AI 智能名片、S2B2C 商城小程序在用户留存与品牌发展中的应用研究

摘要&#xff1a;本文以企业和个人品牌发展中至关重要的用户留存问题为切入点&#xff0c;结合管理大师彼得德鲁克对于企业兴旺发达的观点&#xff0c;阐述了用户留存对品牌营收的关键意义。在此基础上&#xff0c;深入分析开源 2 1 链动模式、AI 智能名片、S2B2C 商城小程序在…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类&#xff0c;内容如下&#xff1a; Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

「数据要素」行业简报|2024.11.上刊

纵观数据要素行业动态&#xff0c;洞察行业风向&#xff0c;把握行业脉搏&#xff01; 一、政策发布 1、《山东省公共数据资源登记管理工作规范(试行)》公开征求意见 11月7日&#xff0c;为认真贯彻落实《中共中央办公厅 国务院办公厅关于加快公共数据资源开发利用的意见》《…

什么是RAG? LangChain的RAG实践!

1. 什么是RAG RAG的概念最先在2020年由Facebook的研究人员在论文《Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks》中提出来。在这篇论文中他们提出了两种记忆类型&#xff1a; 基于预训练模型&#xff08;当时LLM的概念不像现在这么如日中天&#xff0…

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先&#xff0c;确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板&#xff1a; npm init vitelatest进入项目目录 创建完成后&#xff0c;进入项目目录&#xff1a; cd vue3-demo启动…

nginx部署H5端程序与PC端进行区分及代理多个项目及H5内页面刷新出现404问题。

在项目中会碰见需要在nginx代理多个项目&#xff0c;如果在加上uniapp开发的H5端的项目&#xff0c;你还要在nginx中区分PC端和手机H5端&#xff0c;这就会让人很头大&#xff01;网上大部分的资料都是采用在nginx的conf配置文件中添加区分pc和手机端的变量例如&#xff1a;set…

软件测试项目实战

软件测试是使用人工或者自动的手段来运行或者测定某个软件系统的过程&#xff0c;其目的在于检验它是否满足规定的需求或弄清预期结果与实际结果之间的差别。 在软件投入使用前&#xff0c;要经过一系列的严格测试&#xff0c;才能保证交付质量。 一、引言 1.编写目的 本文档…

2024开发者浏览器必备扩展,不允许还有人不知道~

在开发过程中&#xff0c;优秀的扩展工具能够极大提升我们的工作效率&#xff0c;简化工作流程&#xff0c;并使得在浏览器中的开发和调试变得更加便捷。 根据市场占比&#xff0c;Chrome、Safari、Edge、Firefox、Opera 是前五大浏览器&#xff0c;其中Chrome浏览器占据了领先…

分享一个傻瓜式一键启动的加速器

主要发现开通一个号能电脑手机互通&#xff0c;原来电脑手机各一个加速器钱包在滴血。。。一个月也很便宜差不多二十多 链接放这了&#xff0c;有需要自提&#xff1a;首页-小熊加速器http://xxjsq.co/ytfa

TDesign了解及使用

文章目录 1、概述2、快速开始2.1使用 npm 安装2.2通过 浏览器引入 安装2.3、使用 3、简单案例3.1 路由创建3.2、 页面创建3.3、 Table组件3.4、序号展示3.5、 图片展示及预览3.6、 性别字段处理 1、概述 TDesign 是腾讯推出的设计系统&#xff0c;旨在提供一致的设计语言和视觉…

11Java面向对象高级(篇2,Java程序的核心套路!!!!)

更多java知识请点击上面专栏&#xff01;&#xff01;&#xff01; 修道之始&#xff1a; 01Java基础入门(纯小白也能入门&#xff0c;速通Java&#xff0c;知识点归纳超级全面&#xff01;&#xff01;&#xff01;2024版后端成仙起始篇&#xff01;&#xff01;&#xff01;…

定时器(QTimer)与随机数生成器(QRandomGenerator)的应用实践——Qt(C++)

一、QTimer与QRandomGenerator &#xff08;一&#xff09;QTimer&#xff08;定时器&#xff09;[2] QTimer类为定时功能提供了一个高级编程接口。在使用QTimer时&#xff0c;实例化一个QTimer对象并将其timeout()发射信号与合适的信号槽相连接。通过调用QTimer的start()函数…

翼鸥教育:从OceanBase V3.1.4 到 V4.2.1,8套核心集群升级实践

引言&#xff1a;自2021年起&#xff0c;翼鸥教育便开始应用OceanBase社区版&#xff0c;两年间&#xff0c;先后部署了总计12套生产集群&#xff0c;其中核心集群占比超过四分之三&#xff0c;所承载的数据量已突破30TB。自2022年10月&#xff0c;OceanBase 社区发布了4.2.x 版…

AI绘画经验(stable-diffusion)

提示词理解 总的 AI绘画的优点是【想象力】&#xff0c;而不是自然语言的精确描述。 AI绘画只能控制【主体】和【风格】&#xff0c;姿势&#xff0c;表情&#xff0c;装饰&#xff0c;手指都太过于详细了。这也是【人类画师的魅力】 准确描述是徒劳的&#xff0c;只能通过【…

使用支付宝沙箱完成商品下单

使用支付宝沙箱完成商品下单 一&#xff1a;效果展示&#xff1a; 二&#xff1a;代码实现 1&#xff1a;准备工作&#xff1a; 申请支付宝沙箱账户&#xff1a; 登录 - 支付宝 然后要下载密钥密钥工具来生成密钥&#xff1b; 2&#xff1a;流程分析&#xff1a; 先是用户…

Linux设置socks代理

公司里绝大多数主机已经禁止外网访问&#xff0c;仅保留一台主机设置socks作为代理服务器。如下为对socks这一概念的学习整理 什么是socks 是OSI模型下会话层的协议&#xff0c;位于表示层与传输层之间&#xff0c;作用是&#xff1a; exchanges network packets between a c…