记一次 pm2 部署 spa 的坑

记一次 pm2 部署 spa 的坑

前情提要

公司给了一个 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 服务命令了:

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