在前端开发中，部署是一个很重要的环节。部署的方式和工具有很多种，其中一个比较常用的是 PM2。PM2 是一个高效的 Node.js 进程管理工具，它可以自动将 Vue 项目部署到服务器，并确保进程的稳定性和安全性。本篇文章将介绍如何使用 PM2 部署 Vue 项目，并分享一些经验和技巧。
什么是 PM2？
PM2 是一种基于 Node.js 的进程管理工具，可以轻松地启动、重启、停止和监控 Node.js 应用程序。它可以管理多个进程，并自动处理它们的崩溃和重启。此外，PM2 还提供了其他功能，如多线程、负载平衡和日志记录等。
如何使用 PM2 部署 Vue 项目？
以下是使用 PM2 部署 Vue 项目的步骤：
1. 安装 Node.js 和 PM2
在部署 Vue 项目之前，需要在服务器上安装 Node.js 和 PM2。可以使用以下命令进行安装：
sudo apt-get install nodejs sudo npm install pm2@latest -g
2. 将 Vue 项目打包成静态文件
Vue 项目通常需要打包成静态文件，以便在服务器上运行。可以使用以下命令将项目打包成静态文件：
npm run build
这将创建一个名为 dist 的文件夹，其中包含打包后的 Vue 项目。
3. 创建 PM2 进程
接下来，需要创建一个 PM2 进程，以启动 Vue 项目。可以使用以下命令创建一个 PM2 进程：
pm2 start npm --name "vue-app" -- run start
其中，--name 参数指定了进程的名称，--run 参数指定了需要运行的脚本。
4. 配置 PM2 进程
要配置 PM2 进程，可以使用以下命令：
pm2 startup systemd
这将创建一个名为 pm2-app.service 的文件，并将其保存到 /etc/systemd/system 目录下。接下来，可以使用以下命令启动进程：
pm2 save pm2 startup systemd
5. 运行 Vue 项目
PM2 进程已经配置好了，现在可以使用以下命令来运行 Vue 项目：
pm2 start vue-app
这将启动名为 vue-app 的进程。
6. 使用 Nginx 配置反向代理
运行 Vue 项目之后，还需要使用 Nginx 配置反向代理，以便于访问。可以使用以下命令进行配置：
sudo nano /etc/nginx/nginx.conf
在文件中添加以下内容：
-- -------------------- ---- -------
------ -
------ ---
----------- ------------
-------- - -
---------- ----------------------
---------------- ---- ------
---------------- --------- -------------
-------------- ----
-
-其中，example.com 是服务器的域名，localhost:8080 是 Vue 项目运行的地址。完成配置后，重新启动 Nginx 服务器：
sudo systemctl restart nginx
这样就可以通过 http://example.com 访问 Vue 项目了。
注意事项
使用 PM2 部署 Vue 项目需要注意以下几点：
- 在部署之前，确保服务器上已经安装了 Node.js 和 PM2。
- 需要使用
npm run build命令将 Vue 项目打包成静态文件。 - PM2 可以管理多个进程，但是需要为每个进程配置不同的名称。
- 在使用 PM2 部署之前，需要对 Vue 项目进行测试，确保应用程序可以在服务器上正常运行。
结论
PM2 是一个非常有用的 Node.js 进程管理工具，它可以将 Vue 项目快速、高效地部署到服务器上。通过本文介绍的步骤和注意事项，可以轻松地使用 PM2 部署 Vue 项目。如果你还没有尝试过 PM2，那么现在就可以开始学习并使用它来管理你的 Node.js 应用程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c8f759babaf620fb1520a