The latest articles on DEV Community by pinmezh (@pinme_zh). https://dev.to/pinme_zh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3478447%2Fd170f3f2-9162-4fb5-a645-19920e0a1eb8.png https://dev.to/pinme_zh en pinmezh Thu, 04 Sep 2025 05:56:01 +0000 https://dev.to/pinme_zh/shen-du-ce-ping-vue-react-jian-bu-shu-de-shen-qi-pinme-4da2 https://dev.to/pinme_zh/shen-du-ce-ping-vue-react-jian-bu-shu-de-shen-qi-pinme-4da2 <p>不知道大家有没有这种崩溃瞬间：<br> • 领导突然要看项目 <strong>Demo</strong>，客户临时要体验新功能，自己写的小案例想发朋友圈；<br> • 找运维？排期？还要走工单；<br> • 自己买服务器？域名、<strong>SSL</strong>、<strong>Nginx</strong>、防火墙；<br> • 本地起服务？<strong>断电</strong>、<strong>关机</strong>、<strong>局域网</strong>，链接说挂就挂。</p> <p>如果你也受够了这套「求人 or 烧钱」的循环，请立刻认识一下 <strong><a href="https://pinme.eth.limo/" rel="noopener noreferrer">PinMe</a></strong>！</p> <p><strong>Vue</strong> / <strong>React</strong> 一键部署的神器，30 秒上线！</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fscy5kmvglie515dm2js2.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fscy5kmvglie515dm2js2.png" alt=" " width="800" height="377"></a></p> <h2> 什么是 PinMe </h2> <p><strong>PinMe</strong> 是一个开源 <strong>CLI</strong> + <strong>浏览器</strong>双模式工具，把本地静态文件直接推到 IPFS 全球节点，自动生成 <strong><a href="https://xxx.pinit.eth.limo" rel="noopener noreferrer">https://xxx.pinit.eth.limo</a></strong> 这样的 ENS 域名，别人点开就能访问，完全脱离传统服务器。</p> <h2> 核心功能 </h2> <ul> <li>零配置上传：<strong>拖文件夹</strong> or <strong>一行命令</strong>。</li> <li>无限制：单次 <strong>html</strong> 部署 <strong>20m</strong> 不成问题。</li> <li>HTTPS + CDN：自动证书，全球加速。</li> <li>版本管理：随时查看 / 删除历史部署。</li> </ul> <h2> 有哪些优势 </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F22iil1180gbi5got8lud.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F22iil1180gbi5got8lud.png" alt="传统做法 VS PinMe" width="800" height="242"></a></p> <h2> 如何快速使用（实战案例：在线简历） </h2> <p>我自己用 <strong>Vue3</strong> + <strong>TypeScript</strong> 写了一份<strong>「在线简历」</strong>，想在面试季直接甩给 HR，于是用 PinMe 把它挂到线上，全程 1 分钟——下面把两种姿势都演示给你。</p> <h3> 网页拖拽上传（完全零命令） </h3> <p>浏览器打开 <strong><a href="https://pinme.eth.limo" rel="noopener noreferrer">https://pinme.eth.limo</a></strong> → 点击 <strong>Deploy from Browser</strong></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fro9d5el4db05j5yu27k6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fro9d5el4db05j5yu27k6.png" alt=" " width="520" height="355"></a></p> <ul> <li>本地执行 npm run build，得到 dist/ 文件夹</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqlf7vv8zn813idv23vlx.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqlf7vv8zn813idv23vlx.png" alt=" " width="800" height="533"></a></p> <ul> <li>直接把 dist 文件夹拖进浏览器窗口</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3utkohrd2e8e0rsm7l34.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3utkohrd2e8e0rsm7l34.png" alt=" " width="517" height="342"></a></p> <ul> <li>等待进度条 100%，页面会出现上传成功提示</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4x9h4ogorfqsehrigb28.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4x9h4ogorfqsehrigb28.png" alt=" " width="800" height="465"></a></p> <ul> <li>复制链接到简历 PDF / 邮件正文，HR 点开就能看到你的在线简历！</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8xhj8oonam00bxz84d87.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8xhj8oonam00bxz84d87.png" alt=" " width="800" height="222"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdb94wljjbr0jkqziv5p8.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdb94wljjbr0jkqziv5p8.png" alt=" " width="800" height="434"></a></p> <h3> CLI 一键上传（本地安装） </h3> <p>只需要一条 npm 命令，即可安装！<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> # 1. 全局安装（只需一次） npm install -g pinme # 2. 进入项目并打包 cd my-resume npm run build # 生成 dist/ # 3. 一条命令上线 pinme upload ./dist </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzh8p4vxzz4z72g5mnc7g.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzh8p4vxzz4z72g5mnc7g.png" alt=" " width="639" height="275"></a></p> <p>上传成功后终端返回</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F45nx9sl306zg61pf1l7v.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F45nx9sl306zg61pf1l7v.png" alt=" " width="800" height="290"></a></p> <p>顺手把链接放到微信 / 邮件 / 简历 PDF，面试官随时访问，永不宕机。</p> <p>在线简历访问地址：<a href="https://h6vwmykq.pinit.eth.limo/" rel="noopener noreferrer">https://h6vwmykq.pinit.eth.limo/</a></p> <h2> 进阶玩法 </h2> <ul> <li>持续集成 在 GitHub Actions 里加两行，就能实现「push 代码 → 自动 build → 自动 PinMe 部署」： </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> - run: npm run build - run: npx pinme upload ./dist </code></pre> </div> <ul> <li><p>多环境<br> 给测试、预览、正式各建一条链接，互不干扰。</p></li> <li><p>历史版本回滚<br> </p></li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> pinme list # 查看历史 10 条 pinme rm &lt;CID&gt; # 删除旧版本 </code></pre> </div> <h2> 一句话安利 </h2> <p>别再为五分钟演示搭两小时环境——用 PinMe，一行命令，永久免费上线！</p> <p>👉 立即体验：<a href="https://pinme.eth.limo" rel="noopener noreferrer">https://pinme.eth.limo</a></p>