Nuxt：Nuxt3项目部署【详细教程-亲测有效~！】

最新推荐文章于 2025-04-15 11:35:20 发布

前端白袍

最新推荐文章于 2025-04-15 11:35:20 发布

阅读量2.8k

点赞数 17

分类专栏：服务端学习笔记——linux生态大集合文章标签： vue.js node.js

本文链接：https://blog.youkuaiyun.com/qq_44776454/article/details/145547158

版权

服务端学习笔记——linux生态大集合专栏收录该内容

39 篇文章

订阅专栏

在这里插入图片描述

提示：本篇文章主要针对Nuxt3项目上线部署方法进行记录讲述！

Nuxt项目部署可分为多种包含但不限于官方PM2 部署方法，Docker部署等，本文就PM2部署方法进行介绍！~

一、环境介绍：

系统版本： Ubuntu版本 23.04
Node版本： v20.13.0
PM2版本： 5.4.3
Nuxt框架版本： 3.7.4

二、环境安装：

1.操作系统安装Node环境：

（1）方法一：使用Ubuntu的官方软件仓库：

sudo apt update
sudo apt install nodejs npm

（2）方法二：手动下载Node安装包上传至目标服务器手动解压安装：
下载地址1：https://nodejs.org/zh-cn/download
在这里插入图片描述
下载地址2：https://nodejs.cn/download/

在系统/usr/local目录下创建node文件夹，将下载好的node安装软件包,使用Xftp软件上传。

解压并安装

# 进入目录
cd /usr/local/node
# 解压
xz -d node-v20.13.0-linux-x64.tar.xz
tar -xvf node-v20.13.0-linux-x64.tar

（3）方法三：使用nvm node包管理工具进行下载，相较于上面两种方法可以灵活切换node版本：
方法参照与文章： Linux：安装 node 及 nvm node 版本管理工具（ubuntu ）

2.配置node环境变量

如果手动下载解压安装的方法安装的node可能需要单独配置node环境变量；

# 打开profile文件进行编辑
sudo vi /etc/profile
# profile文件中，按i键进行编辑插入
# 在最上面写入如下环境变量的配置
export NODE_HOME=/usr/local/node 
export PATH=$NODE_HOME/bin:$PATH
# 编辑完按Esc键退出编辑，最后输入:wq保存退出（注意:要写）

查看是否安装成功
在这里插入图片描述

3.安装pm2

PM2（进程管理器 2）是一个快速且简单的解决方案，用于在你的服务器或虚拟机上托管你的 Nuxt 应用。
pm2 是开源的基于Node.js的进程管理工具，可实现资源高效调度和负载均衡，包括守护进程、监控、日志的一整套完整的功能。

npm i -g pm2

三、具体部署：

1.项目打包

# 执行命令
npm run build

在这里插入图片描述
在项目文件夹中生成一个.output文件夹；

将.output文件夹通过Xftp软件上传到服务器目标文件夹中

需要注意的是：当我们把.output文件夹移入目标文件夹后，.output文件是隐藏文件，是看不见的。

2.配置pm2

在服务区放置.output文件的目录下创建一个pm2的执行脚本文件ecosystem.config.cjs。

需要注意：网上查询有的说道文件名称是ecosystem.config.js或者ecosystem.config.json都行，但是经过亲测，目前ecosystem.config.js在后续运行pm2时会报错，ecosystem.config.json并没有尝试过；官网上是指定文件名称为ecosystem.config.cjs，从网上部分相关截图来看ecosystem.config.js是nuxt官方在旧版本时推出的写法，而ecosystem.config.cjs是新版本的写法。
在这里插入图片描述

需要注意得是：这里得新版本和旧版本区别，不是说：旧版本用旧版本的命名写法，新版本用新版本的命名写法；而是，新版本更新后，目前新旧版本都得使用ecosystem.config.cjs命名，以.cjs后缀结尾，因为我的项目在部署时，其nuxt版本是3.7.4，已经低于上图中的v3.12版本了。
在这里插入图片描述

创建好ecosystem.config.cjs文件后，对其进行编辑操作。

#进入所在目录进行编辑操作：
sudo vim ecosystem.config.cjs

#将下面内容赋值到ecosystem.config.cjs文件中保存：
module.exports = {
  apps: [
    {
      name: 'gw', 
      exec_mode: 'cluster',
      instances: 'max', 
      port: '8080',
      script: './.output/server/index.mjs',
      args: 'start'
    }
  ]
}
# 上面配置项：“name”是pm2运行进程的名称(自定义)；“port”是指定访问的端口（自定义，作用：修改Nuxt打包默认3000端口）
#			“script”是脚本执行的最终命令

有关pm2（进程管理）的配置参数的具体解释请查询文章下发相关链接！_！！_！！_！！~！

3.利用pm2后台运行nuxt项目

使用pm2运行Nuxt项目：进入项目文件目录，运行pm2命令，pm2会在当前文件目录内查找ecosystem.config.cjs文件来运行启动

#pm2操作常用命令

#1.使用pm2启动（启动服务）
pm2 start ecosystem.config.cjs
#2.保存当前运行的应用程序列表（保存服务）
pm2 save
#3.生成一个启动脚本，并将保存到应用程序列表添加到系统启动项中（保存设置当前服务为系统自启动服务）
#执行 pm2 startup 命令后，每当服务器在关机重启后，都会自启动当前运行项目的服务进程。
pm2 startup
#4.终止进程，但程序还在（终止服务）
pm2 stop 自定义名称
#5.删除（删除服务）
pm2 delete 自定义名称
#6.取消系统自启动服务
pm2 unstartup systemd
#7.重启某服务
pm2 restart 自定义名称
#8.显示所有进程状态
pm2 list
#9.服务器重启
systemctl reboot

开启服务步骤：

pm2 start 【脚本文件】

pm2 start ecosystem.config.cjs

在这里插入图片描述

pm2 save 保存服务（pm2层面的自启）
开机自启 pm2 startup (操作系统开机后的自启)

关闭服务步骤：

pm2 delete 【pm2服务名称】

pm2 delete gw

在这里插入图片描述

pm2 save （关闭不执行save ，那么开机的时候服务会重新启动）

3.删除系统自动启动服务 pm2 unstartup systemd

需要注意得是： 在我们不需要这个服务的时候，在执行完pm2 delete 【服务名】 命令后，还需要执行pm2 save命令，否则当pm2启动时，pm2会恢复到上一次save的状态，从而又开启服务启动时的进程服务。

4.拓展：一种PM2方式下的部署方法(不太推荐但可行)

执行完上面三步Nuxt3利用PM2进行管理部署的方法就完成了。这里介绍一种PM2方式，不同的脚本命令部署的方法。

（1）使用npm run build 项目打包后，将.nuxt、nuxt.config.js、package.json、public文件上传到服务器
在这里插入图片描述

注意：.nuxt文件同上面涉及的.output文件一样是隐藏的；【Linux系统中以.开头的文件名是隐藏文件】

（2）在项目文件目录下，执行npm i命令安装依赖
在这里插入图片描述

（3）在项目文件下，创建PM2配置文件ecosystem.config.cjs文件；

#进入所在目录进行编辑操作：
sudo vim ecosystem.config.cjs

#将下面内容赋值到ecosystem.config.cjs文件中保存：
module.exports = {
  apps: [
    {
      name: 'gw', 
      exec_mode: 'cluster',
      instances: 'max', 
      port: '8080',
      script: './node_modules/nuxt/bin/nuxt.mjs',
      args: 'start'
    }
  ]
}
# 上面配置项：“name”是pm2运行进程的名称(自定义)；“port”是指定访问的端口（自定义，作用：修改Nuxt打包默认3000端口）
#			“script”是脚本执行的最终命令