宝塔面板部署 Nuxt.js 项目完整教程（SSR/SSG模式）

一、环境准备

1.1 服务器配置

1.2 安装宝塔面板

二、项目部署流程

2.1 上传项目文件

2.2 安装依赖

2.3 构建项目

SSR模式：

SSG静态生成模式：

三、服务配置

3.1 PM2进程守护

3.2 Nginx配置

3.3 HTTPS配置

四、常见问题解决

4.1 端口占用问题

4.2 内存不足处理

4.3 文件权限问题

五、高级优化

5.1 自动部署方案

5.2 性能调优

六、部署验证

一、环境准备

1.1 服务器配置

操作系统：推荐 CentOS 7+/Ubuntu 18.04+
配置要求：至少 1核 2G 内存（SSR模式需要更高配置）
开放端口：确保服务器开放 80/443 端口（HTTP/HTTPS）

1.2 安装宝塔面板

# CentOS
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

# Ubuntu
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

安装完成后记录面板地址、账号密码，登录后安装以下软件：

Nginx 1.20+
Node.js 16+（建议通过「软件商店-Node版本」安装）
PM2管理器

二、项目部署流程

2.1 上传项目文件

将本地项目打包（排除 node_modules）：


tar -zcvf nuxt-project.tar.gz --exclude=node_modules .

通过宝塔「文件」功能上传到服务器目录（如 /www/wwwroot/nuxt-app）

2.2 安装依赖

cd /www/wwwroot/nuxt-app
npm install --production

2.3 构建项目

SSR模式：

npm run build

SSG静态生成模式：

npm run generate

三、服务配置

3.1 PM2进程守护

打开宝塔「PM2管理器」
添加新项目：
- 启动文件：npm
- 运行目录：选择项目目录
- 启动参数：run start（SSR模式）或 run start:static（SSG模式）

3.2 Nginx配置

通过宝塔创建新站点（需提前解析域名）
修改站点配置文件：

server {
    listen 80;
    server_name yourdomain.com;
    
    # SSR模式代理
    location / {
        proxy_pass http://127.0.0.1:3000; # Nuxt默认端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # SSG静态模式配置
    # root /www/wwwroot/nuxt-app/dist;
    # index index.html;
}

3.3 HTTPS配置

在宝塔「SSL」菜单申请Let's Encrypt证书
强制开启HTTPS
修改Nginx配置自动跳转HTTPS

四、常见问题解决

4.1 端口占用问题

# 查看端口占用
lsof -i :3000
# 结束进程
kill -9 <PID>

4.2 内存不足处理

添加SWAP分区：

dd if=/dev/zero of=/swapfile bs=1M count=2048
mkswap /swapfile
swapon /swapfile

4.3 文件权限问题

chown -R www:www /www/wwwroot/nuxt-app
chmod -R 755 /www/wwwroot/nuxt-app

五、高级优化

5.1 自动部署方案

配置Git仓库Webhook

创建部署脚本：

#!/bin/bash
git pull origin master
npm install
npm run build
pm2 restart nuxt-app

5.2 性能调优

开启Nginx Gzip压缩
配置浏览器缓存
使用CDN加速静态资源

六、部署验证

访问域名后，可通过以下方式验证：

查看页面源代码确认服务端渲染（SSR模式）
检查 /etc/nginx/sites-enabled 配置
PM2日志查看：
```
pm2 logs nuxt-app
```

注意事项：

生产环境建议使用 nuxt.config.js 配置 target: 'server' 或 target: 'static'
建议使用 .env 文件管理环境变量
定期通过 pm2 save 保存进程列表

通过以上步骤即可完成Nuxt项目在宝塔面板的部署，如有其他问题欢迎留言讨论！