前端项目融合

需求描述

有一个老项目，使用 vue2.x 全家桶做的，现在要添加一个比较大的功能模块，是一个编辑器，准备使用 Vue3.x 实现。

这时候需要考虑的是，如何在用户无感知的情况下，将这两个项目融合在一起。预计是打开编辑器的时候打开一个新的 tab 进行编辑，但是域名不变。

我们的业务域名是http://example.com，给新项目准备的统一前缀是/editor/，新功能模块的路由是/edit，那么在访问http://example.com/editor/edit?id=1的时候应该访问新的前端项目，在访问其他路由的时候需要访问原来的前端项目。

由于是使用的 Vite4.0，注意新项目的配置文件需要添加base: "/editor/"匹配 URL 路径名

解决方案

在服务器部署的时候，需要准备 2 个独立的文件夹分别用来存放两个前端项目 build 出来的文件，分别是html(旧)和editor(新)，接下来想要实现的目标是：

1. 访问/editor/*的时候应该访问文件夹editor
2. 访问其他路由的时候需要访问原来的前端项目

这部分需要调整我们 nginx 的 location 命中规则

nginx

现在的规则是这么写的：

location / {
  root html;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}

那么添加一个文件夹就添加一个规则：

location /editor {
  root editor;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}

添加规则后，测试发现访问/editor仍然命中了原来的项目，经过查询发现很多人使用alias代替root

location /editor {
  alias editor;
  index index.html index.htm;
  try_files $uri $uri/ /editor/index.html;
}

这次成功了，经过查询知道了 root 和 alias 的不同：

root

会把请求 url 的 (ip+port)/域名 替换为 root 指定的目录，访问资源

alias

把请求 url 的 (ip+port)/域名+匹配到的路径替换为 alias 指定的目录，访问资源

也就是说我们第一次的 root 写法也可以，只不过需要在 editor 的里面再建一个 editor，肯定是不如 alias 方便和容易理解