Try Ithy free
Save

发布于 · 更新

在 Windows 的 Nginx 上用不同路径部署多个 Vue 应用

把每个应用编译到独立的目录,为每个应用配置不同的 URL 前缀。浏览器中的资源路径、Vue Router 的基础路径和 Nginx 的回退路径必须一致。

为应用设定路径

例如用 Vite 把两个应用的 base 分别设为 /app-a/ 和 /app-b/。使用 HTML5 历史模式时,路由可调用 createWebHistory(import.meta.env.BASE_URL)。把构建产物分别复制到 Nginx 站点根目录下的 app-a 和 app-b。

处理深层路由刷新

为 /app-a/ 设置独立的 location,使用 try_files $uri $uri/ /app-a/index.html。为 /app-b/ 设置同样的规则,并回退到它自己的 index.html。不要让其中一个应用的刷新返回另一个应用的首页。

按实际 URL 验证

先访问两个根路径,再分别刷新一个深层路由。在浏览器网络面板中检查 JavaScript 和 CSS 的请求是否使用正确的前缀。运行 nginx -t 验证配置,再按本机服务管理方式重新加载。

參考資料

Vite 静态部署说明

Ask Ithy a follow-up