从0部署Nuxtjs项目

1. 1. 前言
2. 2. 正文
   1. 2.1. 安装Nodejs
   2. 2.2. 配置环境变量
   3. 2.3. 检验安装情况
   4. 2.4. 配置下载源
   5. 2.5. 安装PM2
   6. 2.6. 上传源码到服务器
   7. 2.7. 使用PM2启动
   8. 2.8. 最终效果
3. 3. 后记

前言

众所周知，Nuxtjs项目部署起来与Vuejs项目部署有些许不同。Vuejs在本地构建后生成可直接上传服务器的静态文件，而Nuxtjs因为涉及服务端渲染，需要由Nodejs实时生成并返回HTML。本文，将从0开始把Nuxtjs项目部署到公网上。

正文

安装Nodejs

我们先在服务器上安装Nodejs，这里不使用nvm等工具了，这里在/opt文件夹下放Nodejs。首先，我们先拉包：

wget https://mirrors.aliyun.com/nodejs-release/v24.18.0/node-v24.18.0-linux-x64.tar.gz

然后进行解压：

tar -zxvf node-v24.18.0-linux-x64.tar.gz

在这，我嫌他解压后的文件夹名字太长，给改下名字：

mv node-v24.18.0-linux-x64 node-2418

我们这时ll，会发现有个名为node-2418的文件夹：

配置环境变量

打开/etc/profile，输入以下进行配置：

NODEJS_HOME=/opt/node-2418
PATH=$PATH:$NODEJS_HOME/bin
export PATH

打开终端，输入以下命令使其生效：

source /etc/profile

检验安装情况

我们打开终端，当输入node -v和npm -v能发现正常运行即安装成功。

配置下载源

因为Nodejs下载包使用的是国外源，速度比较慢，通过输入以下命令使其变为国内源：

npm config set registry=https://registry.npmmirror.com/

安装PM2

nuxt项目需要使用Node启动，为了保护进程，我们需要使用pm2这款插件，输入以下命令安装：

npm i pm2 -g

上传源码到服务器

我们Nuxt项目构建后，会生成名为.output的文件夹，我们需要把整个文件夹都上传到服务器。这里上传到/www/wwwroot/nuxt-blog里。

使用PM2启动

我们打开终端，进到.output/server这里。我们可以指定名字，这里以nuxt-blog为例，也可以指定启动端口，这里以3363为例，输入以下命令：

PORT=3363 pm2 start ./index.mjs --name "nuxt-blog"

会出现以下界面：

我们可以通过pm2 list来查看已启动的列表。

最终效果

可以通过绑定域名 反向代理到3363端口，也可以直接防火墙开放3363端口，直接通过ip地址访问。如下图：

后记

以上就是本文全部内容，欢迎大家讨论。