资讯动态

vercel部署的开发小工具集合

发布时间:2026/8/8 23:30:19 来源:尧图企业网站定制
DevToolboxdevkit面向日常开发的纯前端小工具集合在浏览器里完成编解码、格式转换、文本对比与可视化无需后端与数据库。界面支持中 / 英切换与明 / 暗主题。源码仓库https://github.com/xiwen-haochi/devkit在线预览https://www.epic.xn–fiqs8s/功能一览所有工具均从首页卡片进入路由以/tool/*为主。计算与解析在本地完成不将敏感内容发往自建服务器若使用第三方 CDN 加载脚本仍受浏览器与托管平台策略约束。工具路径说明JSON 可视化编辑器/tool/json-editor编辑、格式化、压缩、校验树形 / 格式化视图智能转 JSON本地草稿localStorageBase64 编解码/tool/base64文本与 Base64 互转兼容中文与 emojiURL 编解码/tool/url按行对 URI 做 encodeURI / decodeURI时间戳转换/tool/timestampUnix 秒 / 毫秒与本地时间互转正则测试/tool/regex正则匹配、高亮与分组查看密码生成器/tool/password按长度与字符集生成随机密码颜色转换器/tool/colorHEX、RGB、HSL 互转与预览 / 取色二维码工具/tool/qrcode文本生成二维码上传图片解析二维码内容文本 Diff/tool/diff左右文本按行对比与高亮Markdown 预览/tool/markdown实时预览可复制 HTML编码加密/tool/cryptoJWT 解码展示不验签SHA-256/384/512十六进制编解码PBKDF2 AES-GCM 加盐加解密Web CryptoXPath 在线工具/tool/xpath左侧 XML/XHTML 片段右侧常用 XPath 与自定义表达式复制匹配结果说明编码加密页为客户端加解密与 JWT解码请勿把生产密钥或真实业务 JWT 当作「安全托管」XPath 工具依赖良构 XML杂乱 HTML 可先整理或使用页面上的「根节点包裹」选项。技术栈框架Next.js 16App RouterUIReact 19、Tailwind CSS 4代表性依赖CodeMirrorJSON、markedMarkdown、qrcode / jsQR二维码、xmldom/xmldomxpathXPathNode.js 建议使用20与 Next.js 官方要求一致。本地运行需要已安装 pnpm推荐或自行改用npm/yarn并调整命令。pnpminstallpnpmrun dev浏览器打开 http://localhost:3000。常用命令pnpmrun dev# 开发服务器pnpmrun build# 生产构建pnpmrun start# 本地运行生产构建需先 buildpnpmrun lint# ESLint部署到 Vercel本项目为标准 Next.js 静态导出友好型应用默认next build即可根目录包含vercel.jsonframework: nextjs与 Vercel 自动检测一致。方式一Fork 后导入推荐个人部署在 GitHub 打开本仓库点击右上角Fork得到你的副本例如你的用户名/devkit。登录 VercelAdd New… → Project。Import你 Fork 的 GitHub 仓库。构建设置一般保持默认即可Framework PresetNext.jsInstall Commandpnpm install若未检测到 pnpm可在项目设置里指定或使用npx pnpm installBuild Commandpnpm run buildOutput Directory无需手动填写由 Next.js 插件处理Environment Variables当前应用不依赖服务端密钥类环境变量无数据库与外部 API 密钥时可留空。点击Deploy等待构建完成后使用 Vercel 提供的*.vercel.app域名访问。需要自定义域名时在 Vercel 项目Settings → Domains中添加并按要求配置 DNS。之后每次推送到默认分支Vercel 会自动触发新部署除非你关闭 Git 集成。方式二Vercel CLInpmi-gvercelcd/path/to/devkit vercel按提示登录、链接项目并完成首次部署生产环境可使用vercel --prod。目录结构简要src/ app/ # App Router 页面与布局 components/ # 通用壳层如 ToolShell、复制按钮、主题与语言切换等 lib/ # 工具函数、工具列表数据、站点常量等 tools/ # 各工具页面主体组件反馈与贡献欢迎通过 GitHubIssues或Pull Requests提出建议与改进。若你仅想自用Fork 后按上文部署即可无需改代码即可上线。

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价