如何快速搭建Sub-Web：Vue前端配置生成器完整指南

如何快速搭建Sub-WebVue前端配置生成器完整指南【免费下载链接】sub-web项目地址: https://gitcode.com/gh_mirrors/su/sub-webSub-Web是基于Vue.js 2.6与subconverter后端实现的订阅配置自动生成Web界面提供简洁美观的前端界面支持多种代理客户端配置生成。本指南将帮助你快速上手这款强大的Vue前端配置生成工具。Sub-Web项目概述Sub-Web是一款现代化的订阅配置生成工具它采用Vue.js 2.6和Element UI构建提供了直观的用户界面和丰富的功能特性。项目采用模块化架构设计不仅易于维护和扩展还支持Docker一键部署让用户可以快速搭建属于自己的配置生成服务。核心功能特性Sub-Web具备以下核心特性现代化界面基于Vue 2.6 Element UI构建提供简洁美观的用户体验模块化架构项目结构清晰易于维护和扩展Docker支持提供Docker镜像支持一键部署响应式设计完美支持移动端和桌面端实时预览配置生成过程实时预览所见即所得自定义参数支持丰富的自定义转换参数环境要求与准备在开始使用Sub-Web之前请确保你的环境满足以下要求Node.js22.x版本Yarn1.22版本Docker20.10版本可选用于容器化部署你可以通过以下命令检查Node.js和Yarn版本# 检查Node.js版本 node -v # 应输出: v22.x.x # 检查Yarn版本 yarn -v # 应输出: 1.22.x快速安装指南方法一使用Docker推荐Docker部署是最简单快捷的方式只需执行以下命令docker run -d \ -p 58080:80 \ --restart always \ --name subweb \ careywong/subweb:latest部署完成后访问http://localhost:58080/即可使用Sub-Web。方法二本地开发环境如果你需要进行二次开发或自定义配置可以通过以下步骤搭建本地开发环境# 克隆项目 git clone https://gitcode.com/gh_mirrors/su/sub-web cd sub-web # 安装依赖 yarn install # 启动开发服务器 yarn serve访问http://localhost:8080/即可查看应用。项目结构解析Sub-Web采用清晰的目录结构主要包含以下部分src/views/包含主要页面组件如Subconverter.vuesrc/components/存放可复用组件如配置上传对话框ConfigUploadDialog.vuesrc/services/后端服务相关代码如backendService.jssrc/utils/工具函数如validators.jspublic/静态资源文件高级配置选项Sub-Web支持通过环境变量进行自定义配置。创建.env文件可以设置后端服务地址等参数# Subconverter后端地址 VUE_APP_SUBCONVERTER_DEFAULT_BACKENDhttps://api.wcc.best # 其他配置 VUE_APP_PROJECThttps://gitcode.com/gh_mirrors/su/sub-web生产环境部署构建生产版本# 构建生产版本 yarn build构建完成后dist目录包含所有生产文件。Docker Compose部署Sub-Web提供了Docker Compose配置可一键部署完整服务栈# 进入services目录 cd services # 编辑.env文件修改端口和域名配置 # 默认配置SUBWEB_PORT58080, MYURLS_PORT8002 vim .env # 启动所有服务 docker-compose up -dNginx配置示例以下是Nginx配置示例用于作为反向代理和静态文件服务器server { listen 80; server_name your-domain.com; root /var/www/sub-web/dist; index index.html index.htm; # SPA路由支持 location / { try_files $uri $uri/ /index.html; } # Gzip压缩 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 6; gzip_types text/plain text/css text/javascript application/json application/javascript; gzip_vary on; }总结Sub-Web作为一款基于Vue.js的订阅配置生成工具通过直观的界面和强大的功能极大简化了代理客户端配置的生成过程。无论是通过Docker快速部署还是本地开发自定义都能满足不同用户的需求。如果你对项目有任何改进建议或遇到问题欢迎参与项目贡献一起完善这个优秀的开源工具。【免费下载链接】sub-web项目地址: https://gitcode.com/gh_mirrors/su/sub-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考