PPTist 是一款基于 Vue 3.x 和 TypeScript 开发的开源在线演示文稿应用。它不仅支持丰富的幻灯片编辑功能与多样化布局，还具备多人实时协作能力，适用于远程汇报、线上教学及个人创作等多种场景。本文将通过详细的步骤，指导你完成 PPTist 的本地环境搭建，并借助内网穿透工具实现外网访问。
本地环境部署 PPTist
在开始之前，请确保你的本地开发环境已安装 Node.js 和 Git。
1. 克隆项目代码
首先，使用 Git 命令行工具将项目仓库克隆到本地。执行以下命令：
git clone https://github.com/pipipi-pikachu/PPTist.git
该命令会从 GitHub 下载 PPTist 项目的全部源代码。
2. 安装项目依赖
进入刚刚克隆下来的项目目录，并使用 npm 安装项目运行所必需的所有依赖包。
cd PPTist
npm install
此过程会根据 package.json 文件中的配置，下载并安装 Vue、TypeScript 等前端依赖。了解更多关于前端工程化的知识，可访问 前端框架/工程化。
3. 启动开发服务器
依赖安装完成后，运行以下命令启动本地开发服务器：
npm run dev
命令执行成功后，终端会显示本地服务器的访问地址（通常是 http://127.0.0.1:5173）以及 Vite 的构建就绪信息。
4. 本地访问验证
打开浏览器，在地址栏输入 http://127.0.0.1:5173。如果一切正常，你将看到 PPTist 的应用主界面，这标志着本地部署成功。
PPTist 主界面，支持幻灯片编辑、画布设置等功能
此时，应用仅能在本地计算机上访问。若想让互联网上的其他用户也能访问，需要进行内网穿透。
通过内网穿透实现外网访问
内网穿透可以将你本地服务的端口映射到一个公网地址上。这里我们使用“路由侠”工具来完成此操作。
1. 安装并启动路由侠
下载并安装路由侠客户端。安装完成后打开软件，在主界面点击 【内网映射】 功能入口。
路由侠主界面，点击“内网映射”
2. 创建新的映射规则
在映射管理界面，点击 【添加映射】 按钮，开始创建一条新的映射规则。
3. 选择应用场景
在弹出的窗口中，选择 【原生端口】 场景。此模式适用于大多数 Web 应用、办公系统等基于 TCP 协议的服务。深入学习网络协议，可参考 网络/系统 相关内容。
4. 配置映射参数
接下来，需要填写具体的映射信息：
- 内网主机：保持默认的
127.0.0.1（即本机）。
- 内网端口：填写 PPTist 服务运行的端口
5173。
- 其他设置如公网域名和端口，可以使用系统自动分配的免费线路。
确认信息无误后，点击 【创建】 按钮。
配置内网地址和端口
5. 获取公网访问地址
映射创建成功后，会在列表中显示一条记录。其中 【公网地址】 一栏就是外网访问你本地 PPTist 的链接。右键点击该地址，选择 【复制地址】。
映射列表，复制生成的公网地址
6. 外网访问测试
最后，在任何一台能够连接互联网的设备（如手机、另一台电脑）的浏览器中，粘贴并访问刚才复制的公网地址。你将看到与本地访问完全一致的 PPTist 界面，这表示外网访问已成功配置。
通过公网地址成功访问本地部署的 PPTist
至此，你已经完成了从零开始部署 Vue 3 在线演示文稿应用 PPTist，并实现外网访问的全过程。无论是用于个人学习还是团队协作，这套方案都能提供一个便捷的访问入口。熟练使用 Git 和命令行工具是高效开发的基石，更多运维技巧可以查看 运维/DevOps 板块。
发表于 13 小时前
|
查看: 1|
回复: 0
