Cherokee 是一款相对小众但性能出色的开源 Web 服务器,它最大的特点是提供了一个基于 Web 的图形化管理后台 cherokee-admin,几乎所有配置都可以在浏览器里完成,不需要像 Nginx 那样手写大段配置文件。对于 Vue 3 这种纯前端单页应用来说,构建产物本质上就是一堆静态文件,用 Cherokee 来托管非常合适。本文将完整讲解 Cherokee 的安装、Vue 3 项目的部署配置、History 路由回退、API 反向代理以及性能调优等内容。

一、Cherokee 的核心特性与适用场景
Cherokee 使用 C 语言编写,采用多线程架构而非传统的多进程模型,在处理大量并发静态资源请求时内存占用明显低于 Apache。它内置了对 FastCGI、SCGI、uWSGI、HTTP 反向代理的支持,也原生支持 HTTP/2 和 TLS,这些能力覆盖了 Vue 3 项目部署的几乎所有需求。
对于前端项目来说,部署时要面对的核心问题无非三个:静态文件分发速度、SPA 路由的 404 问题、前后端分离带来的跨域问题。Cherokee 对这三点都有成熟的解决方案:静态文件直接由其内核分发,效率很高;路由回退可以通过 Behavior 规则简单配置;跨域则可以交给反向代理模块统一处理,避免在生产环境暴露后端地址。
与 Nginx 相比,Cherokee 的配置门槛更低,通过 cherokee-admin 面板点几下就能完成大部分工作,适合不熟悉配置文件语法的中小团队快速上线。当然它的社区活跃度不如 Nginx,遇到疑难问题时资料相对少一些,这点在选型时需要权衡。
二、安装 Cherokee 并部署 Vue 3 构建产物
先在服务器上安装 Cherokee。以 Ubuntu 为例,可以直接通过包管理器安装,也可以从源码编译。下面给出包管理器安装方式的命令:
# Ubuntu / Debian 系 sudo apt-get update sudo apt-get install cherokee cherokee-admin # 启动管理后台(默认监听 9090 端口) sudo cherokee-admin -b 0.0.0.0 -p 9090 # 启动 Cherokee 主服务 sudo systemctl start cherokee sudo systemctl enable cherokee
安装完成后,浏览器访问服务器 IP 的 9090 端口即可进入管理面板,初始密码会在执行 cherokee-admin 命令后打印在终端里,记下来即可登录。接着在本地构建 Vue 3 项目:
# 在 Vue 3 项目根目录执行 npm run build # 构建产物位于 dist 目录,上传到服务器 scp -r dist/* user@your-server:/var/www/vue-app/
上传完成后,进入 cherokee-admin 面板,在 vServers 标签页中新建一个虚拟服务器,Document Root 指向 /var/www/vue-app,监听端口设置为 80 或你需要的端口,保存后点击右上角的 Graceful Restart 使配置生效。此时访问服务器 IP 就能看到 Vue 应用的首页了。
三、配置 History 路由回退解决刷新 404 问题
Vue 3 项目通常使用 vue-router 的 History 模式,URL 中没有 # 号,体验更好,但带来的问题是:用户在 /user/profile 这样的路径下刷新页面时,服务器会去找对应的物理文件,找不到就返回 404。解决方案是把所有找不到的路径统一回退到 index.html。
在 cherokee-admin 中,进入虚拟服务器的 Behavior 选项卡,新建一条规则:Rule Type 选择 Default 之外新增一条匹配所有请求的规则,Handler 选择 Redirection,类型设为 Internal,目标填写 /index.html。这样所有未匹配到真实静态文件的请求都会在服务器内部重写到首页文件,由前端路由接管渲染。
如果习惯用命令行,也可以直接编辑配置文件 /etc/cherokee/cherokee.conf,添加类似下面的规则段:
vserver!1!rule!600!match = default vserver!1!rule!600!handler = redir vserver!1!rule!600!handler!rewrite!1!show = 1 vserver!1!rule!600!handler!rewrite!1!regex = ^/(.*)$ vserver!1!rule!600!handler!rewrite!1!substitution = /index.html vserver!1!rule!600!handler!rewrite!1!type = internal
注意规则的优先级编号:Cherokee 中编号越小优先级越高,静态文件规则应该排在回退规则之前,否则 JS、CSS 等资源也会被重写成 HTML,页面会直接白屏。配置完成后重启服务,用浏览器测试深层路由刷新,确认不再出现 404 即可。
四、反向代理与跨域处理
前后端分离架构下,Vue 应用请求后端接口时会遇到跨域。生产环境推荐的做法是在 Cherokee 中配置反向代理,把 /api 开头的请求转发给后端服务,前端代码里统一用相对路径请求,开发环境再通过 Vite 的 proxy 配置做同样的事,这样一套代码无需区分环境。
在 cherokee-admin 中给虚拟服务器添加一条 Behavior 规则,匹配 /api 目录,Handler 选择 HTTP Reverse Proxy,后端地址填入 http://127.0.0.1:8080。保存重启后,形如 /api/users 的请求会被透明转发到本地 8080 端口的后端服务。对应的配置文件写法如下:
vserver!1!rule!300!match = directory vserver!1!rule!300!match!directory = /api vserver!1!rule!300!handler = proxy vserver!1!rule!300!handler!balancer = round_robin vserver!1!rule!300!handler!balancer!type = http vserver!1!rule!300!handler!reverse_proxy!1!host = 127.0.0.1:8080
这种方案的优点是安全——后端服务可以只监听 127.0.0.1,不直接暴露公网,所有外部流量都经过 Cherokee 统一分发,方便后续在同一层做限流、日志和缓存。
五、性能调优:压缩、缓存与连接优化
Vue 3 配合 Vite 构建出的产物文件名自带内容哈希,非常适合做长缓存。在 cherokee-admin 的虚拟服务器设置中找到 Encoding 选项,开启 gzip 压缩,压缩级别设为 5 左右可以在 CPU 占用和压缩率之间取得平衡。JS 和 CSS 文件经 gzip 后体积通常能减少 70% 以上,首屏加载速度提升明显。
缓存方面,为静态资源目录添加 Cache-Control 头。对于带哈希的 assets 目录下的文件,可以放心设置很长的缓存时间:
vserver!1!rule!200!match = directory vserver!1!rule!200!match!directory = /assets vserver!1!rule!200!handler = file vserver!1!rule!200!handler!cache = 1 vserver!1!rule!200!expiration = 31536000 vserver!1!rule!200!expiration!type = timestamp
而 index.html 本身绝不能长缓存,否则发版后用户拿不到新版本的资源引用。给它单独设置一条规则,Cache-Control 设为 no-cache,每次都向服务器验证即可。此外,如果站点启用了 HTTPS,记得在 Cherokee 中开启 HTTP/2,多路复用能让浏览器并行加载打包后的多个 chunk 文件,减少队头阻塞。
六、Cherokee 与 Nginx 的选型对比
最后简单对比一下两款服务器在 Vue 项目部署中的差异。Nginx 生态成熟、资料丰富、高性能案例多,是绝大多数团队的首选;Cherokee 的优势在于图形化配置、上手快、多线程架构内存占用低,适合快速搭建和小规模项目。如果团队已经熟悉 Nginx 配置语法且需要复杂的多层网关能力,继续用 Nginx 更稳妥;如果只是托管一个 Vue 3 前端应用加少量接口代理,Cherokee 反而能省下不少学习成本。
无论选择哪款服务器,部署 Vue 3 应用的核心配置点是一致的:静态文件分发、History 路由回退、接口反向代理、资源压缩与缓存策略。把这四件事做扎实,再配合 Vite 的代码分割与按需加载,应用的加载性能和可维护性都会有可靠保障。