前情提要

公司给了一个 Vue+Vite 的项目, 做完后需要部署在服务器上, 于是下载了 pm2。

第一次打开部署的页面没问题, 但是一刷新, 发现页面 404 了。

详细内容

首先运行 yarn build 后, 项目目录下就会出现一个 dist 目录, 我们就要基于这个 dist 目录来启动项目了.

下面是一些常用参数:

  • pm2 serve dist
    • 因为我们已经编译好了, 所以直接使用 dist 文件夹启动即可.
  • --name "xxx-front"
    • 设置一个名字, 方便我们对 pm2 管理和识别.
  • --port 25565
    • 当然需要设置一个独一无二的端口啦, 不然被占用了就不好了.
  • --spa
    • 因为我们的程序是一个 spa 应用, 所以如果我们直接请求 /home/login, 那么 pm2 会自动去寻找这样的文件, 就会导致文件找不到, 404. 一旦加上这个参数, pm2 就知道这是一个单页面应用了, 就会直接去找根目录的 index.html 进行后续的操作.

综上, 我们可以得到一个通用的, 好用的用来启动单页应用的 pm2 服务命令了:

1
2
# 托管 dist 目录, 命名为 my-vue-project, 启用 SPA 模式, 并在 3000 端口运行
pm2 serve dist --name "my-vue-project" --spa --port 3000

对于其他的 SPA 应用，也可以类似这样执行。