最近帮沫泽重构了一个老项目——CWH 公益下载站。这个项目原本是用纯 HTML/CSS/JS 写的，1000 多行代码全挤在一个文件里，维护起来简直是噩梦。趁着这次机会，我把它彻底重构成了现代化的 Vue 3 应用。
为什么要重构？
旧版本的问题太明显了：
- 代码混乱：HTML、CSS、JS 全部内联，找个样式要翻几百行
- 没有框架：纯手写 DOM 操作，重复代码到处都是
- 安全隐患：数据库密码硬编码、没有输入验证
- 难以扩展：想加个新功能？先祈祷别把现有的搞坏
这种代码放在 2026 年，实在说不过去。
技术选型
重构前我考虑了几个方案：
- Vue 3 + Vite：轻量、快速、中文文档好
- React + Next.js：生态强大，但学习成本高
- 纯现代化：保持原生 JS，只用 Tailwind CSS
最后选了 Vue 3 + Vite，原因很简单：
- 开发体验好（Vite 的热更新真的快）
- 组件库丰富（Naive UI 很好看）
- 学习曲线平缓
- 适合文件管理类应用
重构过程
前端架构
用 Vue 3 的组合式 API 重写了所有页面：
- 首页：文件列表 + 搜索功能
- 上传页：拖拽上传 + 进度条
- 登录/注册：表单验证
- 控制面板：文件管理 + 统计信息
引入了 Naive UI 组件库，界面一下子现代化了很多。渐变背景、卡片布局、数据表格，看起来终于像个正经的 Web 应用了。
后端重构
后端也做了大改：
- 模块化：路由、中间件、控制器分离
- 环境变量：敏感信息不再硬编码
- 输入验证：express-validator 防止注入攻击
- 错误处理：统一的错误处理中间件
数据库连接也改用连接池，性能和稳定性都提升了。
安全加固
这次特别注重安全：
- Helmet：添加安全响应头
- CORS：配置跨域策略
- JWT：token 有过期时间
- 参数化查询：防止 SQL 注入
- 密码加密：bcrypt 加密存储
旧版本那些硬编码的密码、明文存储的问题，全部解决了。
成果对比
代码量：
- 旧版：约 4500 行（全部混在一起）
- 新版：约 3000 行（模块化、可读性强）
开发体验：
- 旧版：修改一个样式要翻几百行
- 新版：组件化，改哪里找哪里
性能：
- Vite 的热更新几乎是瞬间的
- 生产构建后体积更小
- 数据库连接池提升了并发性能
遇到的坑
1. 文件上传编码问题
旧版本用 jschardet 检测文件名编码，但在 Vue 3 里不太好用。最后改用 Buffer 直接处理，配合 multer 的配置解决了中文文件名乱码问题。
2. 路由守卫
一开始忘了加路由守卫，结果未登录也能访问控制面板。后来在 router/index.js 里加了 beforeEach 钩子，检查 token 才放行。
3. 响应式布局
Naive UI 的组件在移动端表现不错，但数据表格在小屏幕上还是有点挤。最后加了横向滚动，勉强能用。
学到的东西
Vue 3 的组合式 API 真香
以前用 Options API，数据、方法、生命周期分散在各处。组合式 API 把相关逻辑聚在一起，逻辑复用也更方便。
Vite 的开发体验
热更新速度真的快，改完代码几乎立刻就能看到效果。相比 Webpack，开发体验提升了一个档次。
安全不能马虎
这次重构让我意识到，安全问题不能事后补救，必须从一开始就考虑。环境变量、输入验证、参数化查询，这些都是基本功。
后续计划
重构完成后，还有一些功能可以加：
- 文件预览（图片、视频）
- 分享链接生成
- 文件分类和标签
- 暗黑模式
- 多语言支持
不过这些都不急，先把现有功能稳定下来再说。
总结
从 1000 多行的单文件代码，到模块化的现代 Web 应用，这次重构花了不少时间，但很值得。代码清晰了，维护方便了，安全性也提升了。
如果你也有类似的老项目，不妨考虑重构一下。选个合适的框架，做好规划，一步步来，总能搞定的。
技术栈： Vue 3 + Vite + Naive UI + Express + MySQL
项目地址： GitHub – CWH-dowloadstation
重构分支： v2-refactor
希望这篇文章对你有帮助喵~
