使用 PM2 部署 Vue 应用指南

  • 本地打包Vue项目
    首先，在您的本地计算机上进入Vue项目根目录，打开终端并执行打包命令。这会生成一个 dist 文件夹。
    npm run build
  • 连接服务器并创建目录
    使用 SFTP 客户端（如 WinSCP）连接到您的服务器。
    • 主机名: [您的服务器IP] (例如: 47.79.40.65)
    • 用户名: root (或您的用户名)
    • 密码: [您的密码]
    连接成功后，进入 /var/www 目录，新建一个文件夹，例如 Xiaomi_vue。
  • 上传文件
    将您本地项目里刚刚生成的 dist 文件夹上传到服务器上的 /var/www/ 目录中的Xiaomi_vue文件夹里。
  • 使用 PM2 启动服务
    使用 SSH 客户端（如 WindTerm 或 FinalShell）登录到您的服务器。然后执行以下命令来启动一个静态文件服务来托管您的Vue应用。
    pm2 start /usr/local/lib/node_modules/serve/build/main.js --name xiaomi_vue -- -s /var/www/Xiaomi_vue/ -l 8000
    解析：
    pm2 start /usr/local/lib/node_modules/serve/build/main.js这里告诉PM2的启动脚本的实际入口文件地址
    /usr/local/lib/node_modules/serve/build/main.js就是你全局安装的 serve 包里的主文件。这样做的效果和 pm2 start serve 一样，只是写成了“绝对路径调用”
    --name xiaomi-vue给 PM2 中的进程起名字，叫 xiaomi_vue方便区分不同项目（否则 PM2 默认用 main.js 作为名字，不好管理）
    --分隔符：表示后面跟的是 传给 serve 的参数，而不是 PM2 的参数
    -s 相当于 single-page mode，单页应用模式（解决 Vue/React 前端路由刷新 404 问题）
    /var/www/Xiaomi_vue/dist指定要托管的目录（也就是 Vue 项目打包后的静态资源目录）
    -l 8000-l 相当于 listen。意思是监听 8000 端口
    注意：此命令假设您已全局安装了 serve 包 (npm install -g serve)。
  • 访问应用
    一切顺利！现在您可以在浏览器中通过以下地址访问您的应用了： 
    http://[您的服务器IP]:8000
    • 上一篇:本地项目上传到github上并部署到cloudflare 下一篇:使用PM2搭建后端api接口
    复制成功