网站备案 营业执照创网站 设计方案

项目打包

我们以 Nuxt3 项目为例子：

项目打包

• 执行 npm run build ， 生成的 .output 文件夹就是部署产物（目前不支持中文路径）
• 执行 npm run preview 可以本地预览效果
  

方式一：使用 Node 部署

需要服务器安装 Node 环境

systemctl install nodejs
systemctl install npm # 安装npm是为后面安装库做准备

• 运行：node .output/server/index.mjs
• 指定端口：PORT=8888 node .output/server/index.mjs
• PORT：是动态添加的环境变量

如果你要管理 Node 版本，可以安装 n 工具

npm install –g n
n --version # 查看版本

方式二：使用 PM2 部署（推荐）

认识PM2（Process Manager）

PM2是一个守护进程管理器, 它将帮助管理和保持你的在线应用程序。

更简单的理解：负责管理Node、Python等程序，并能让程序一直保持在后台运行。

安装PM2

npm install –g pm2

PM2 常用命令和配置文件

将打包后的文件上传到服务器

生成 pm2 配置文件

pm2 init simple #自动生成 ecosystem 配置文件

然后修改配置内容，主要是 SSR 服务器脚本启动路径

module.exports = {apps : [{name   : "Nuxt3AppTest",exec_mode:'cluster',instances:'max',script : "./.output/server/index.mjs"}]
}

启动应用

pm2 start ecosystem.config.js # 启动应用

因为 Nuxt3 默认的端口号 3000，所以需要我们配置服务器的端口安全组，我以阿里云控制台为例子

然后输入你的 IP + 3000端口就可以访问了~（记得要配置上面服务器可访问3000端口安全组，否则可采用 Nginx 做代理也可以）

参考资料

Nuxt.js（Vue SSR）创建项目到服务器（Nginx+PM2）部署详细流程