图床管理前端,Vite + Vue3 + TS,对接 Cloudflare Worker + R2 使用;
对应的后端项目:wdssmq/R2-Worker-cf;
以及,终于实际用了下 antfu/vitesse-lite;
- 执行
install
操作会自动生成.env.dev.local
和.env.local
,分别用于本地调试和打包构建;- 修改其中的
VITE_CF_WORKER_URL
为正式或测试环境的 Cloudflare Worker 地址; - 参考:环境变量和模式 | Vite 官方中文文档
- 修改其中的
- 下载 Worker 项目,设置相应的变量文件用于上传图片时的验证鉴权;
- 调试运行时端口号会随机变更,需要修改至 vite 配置内;
- 用户名密码会保存在浏览器 localStorage 中;
- --------------
- Worker 可以直接执行
npm run deploy
进行部署,前端这边可以打包后传 GitHub Pages 或者 Cloudflare Pages;- 部署至 Cloudflare Pages 时需要设置
VITE_CF_WORKER_URL=http://Worker 服务地址/
和NODE_VERSION=18.16.1
两个环境变量;
- 部署至 Cloudflare Pages 时需要设置
- 吐槽:见过几个项目带
netlify.toml
了,然而就没感觉没啥存在感;
lewkamtao/PicHub: 一个基于 Vue3 + TypeScript 实现的 Github 图床:
https://github.com/lewkamtao/PicHub
yusukebe/r2-image-worker: Store and Deliver images with R2 backend Cloudflare Workers.:
https://github.com/yusukebe/r2-image-worker
爱发电:https://afdian.net/a/wdssmq
哔哩哔哩:https://space.bilibili.com/44744006/video「投币或充电」「大会员卡券领取 - bilibili」
RSS 订阅:https://feed.wdssmq.com/ 「「言说」RSS 是一种态度!!」