基于 Vue.js 2.7 与 tindy2013/subconverter 后端实现的订阅配置自动生成 Web 界面。
- 基于 Vue 2.7 + Element UI 的现代化界面
- Vite 8 构建，热重载开发体验
- 模块化架构：composables / services / utils / config 分层
- SVG 图标精灵（vite-plugin-svg-icons）
- 本地存储缓存，TTL 可配置
- 短链接与配置文件上传集成
- 一键导入 Clash
- Docker 一键部署
docker run -d \
-p 58080:80 \
--restart always \
--name subweb \
careywong/subweb:latestgit clone https://github.com/CareyWang/sub-web.git
cd sub-web
yarn install
yarn dev- Node.js: 22.x
- Yarn: 1.22+
- Docker: 20.10+（可选）
| 命令 | 说明 |
|---|---|
yarn dev |
启动开发服务器 |
yarn build |
构建生产版本 |
yarn preview |
本地预览构建产物 |
yarn lint |
ESLint 代码检查 |
创建 .env 文件（参考如下）：
# Subconverter 后端地址
VITE_SUBCONVERTER_DEFAULT_BACKEND=https://api.wcc.best
# 项目与社区链接
VITE_PROJECT=https://github.com/CareyWang/sub-web
VITE_BOT_LINK=https://t.me/subconverter_discuss
# 后端版本页
VITE_BACKEND_RELEASE=https://github.com/tindy2013/subconverter/actions
# 远程配置示例与进阶文档
VITE_SUBCONVERTER_REMOTE_CONFIG=https://raw.githubusercontent.com/tindy2013/subconverter/master/base/config/example_external_config.ini
VITE_SUBCONVERTER_DOC_ADVANCED=https://github.com/tindy2013/subconverter/blob/master/README-cn.md
# 短链接后端
VITE_MYURLS_API=https://suosuo.de/short
# 配置文件托管后端
VITE_CONFIG_UPLOAD_API=https://oss.wcc.best/upload
# 本地存储与缓存 TTL（秒）
VITE_USE_STORAGE=true
VITE_CACHE_TTL=86400如果部署在子路径（如 /sub-web/），在构建时指定 base：
yarn build --base=/sub-web/或在 vite.config.js 中设置 base: '/sub-web/'。
src/
├── main.js # 应用入口，插件注册
├── App.vue
├── router/ # Vue Router（history 模式）
├── views/
│ └── Subconverter.vue # 主页面
├── components/ # 可复用组件（弹窗等）
├── composables/ # 共享逻辑（表单、订阅、URL 解析）
├── services/ # API 封装（后端版本、短链接、配置上传）
├── config/ # 常量、客户端类型、远程配置列表
├── utils/ # 工具函数（storage、validators、formatters）
├── plugins/ # Vue 插件注册（Element UI、Axios 等）
└── icons/svg/ # SVG 精灵图源文件
docker build -t subweb-local:latest .
docker run -d \
-p 58080:80 \
--restart always \
--name subweb \
subweb-local:latestcd services
# 编辑 .env，配置端口和域名
# 默认：SUBWEB_PORT=58080, MYURLS_PORT=8002, MYURLS_DOMAIN=example.com
vim .env
docker-compose up -dserver {
listen 80;
server_name your-domain.com;
root /var/www/sub-web/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
gzip on;
gzip_types text/plain text/css application/javascript application/json;
gzip_min_length 1k;
location ~* \.(css|js|png|jpg|svg|woff2|ttf|eot)$ {
add_header Cache-Control "public,max-age=86400";
}
}- tindy2013/subconverter - 订阅转换后端
- CareyWang/MyUrls - 短链接服务
- Fork 本仓库
- 创建特性分支
git checkout -b feature/AmazingFeature - 提交更改
git commit -m 'Add some AmazingFeature' - 推送到分支
git push origin feature/AmazingFeature - 创建 Pull Request
代码风格：2 空格缩进、单引号、无分号，遵循 ESLint 配置。
MIT License — Copyright © 2020-2025 CareyWang