Vite Plugin WebIDE

一个为 Vite 项目提供即时 Web IDE 环境的插件。只需简单配置，即可在浏览器中浏览、编辑项目文件，并安全地分享给局域网内的协作者。

✨ 特性

• 零配置集成：开箱即用，自动集成到 Vite 开发服务器。
• 专业级编辑器：内置 Monaco Editor（VS Code 同款核心），提供代码高亮、智能提示和缩略图。
• 安全分享机制：
  • 权限控制：支持生成“只读”或“读写”权限的分享链接。
  • 密码保护：可为分享链接设置访问密码，确保代码安全。
  • 有效期管理：支持设置 1小时、24小时或永久有效的分享链接。
  • 无状态设计：Token 基于签名验证，重启服务即失效（阅后即焚），无持久化隐患。
• 便捷协作：
  • 自动局域网 IP：生成的分享链接自动使用局域网 IP，方便同一网络下的设备访问。
  • 二维码分享：内置二维码生成器，手机扫码即可快速预览或审查代码。
  • 剪贴板集成：一键复制分享链接，配合优雅的 Toast 提示。
• 沉浸式体验：现代化的深色主题 UI，专注代码编写。

📦 安装

npm install vite-plugin-webide --save-dev
# 或者
pnpm add -D vite-plugin-webide
# 或者
yarn add -D vite-plugin-webide

🚀 使用

在你的 vite.config.ts 中引入并注册插件：

import { defineConfig } from 'vite'
import webIde from 'vite-plugin-webide'

export default defineConfig({
  plugins: [
    webIde({
      // 插件配置选项（可选）
      base: '/__webide__' // 访问路径，默认为 /__webide__
    })
  ]
})

启动 Vite 开发服务器后，访问 http://localhost:5173/__webide__ (端口取决于你的配置) 即可进入 IDE。

🛠 配置选项

| 选项 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | base | string | /__webide__ | IDE 页面的基础路径。建议保持默认，除非与项目路由冲突。 |

🔒 安全说明

本插件专为开发环境设计，旨在简化局域网内的代码分享与协作。

1. 开发环境专用：插件仅在 serve 模式下应用，不会影响生产构建。
2. 局域网访问：分享链接包含你的局域网 IP，请确保在受信任的网络环境中使用。
3. Token 签名：分享链接中的 Token 包含权限和有效期信息，并经过服务端签名。修改 URL 参数无法提升权限。

📝 License

MIT