最近接了一个项目，需要用到 nuxt3 技术来满足甲方所要求的需求，在部署的时候遇到了很多问题，这里我一一给大家讲述部署流程，以及所遇到的坑
打包部署
部署分为俩种方式：
静态(spa)部署 和 ssr部署
静态部署
静态部署指的是打包后 只包含静态的 html,css,js文件，对于seo不友好，部署之后和vue3项目部署没什么很大的差别。
在终端输入命令：
npx nuxi generate生成 dist 文件夹，可直接把dist文件夹放入到服务器上，即可访问，可参考我过往的这篇文章：
vue3部署全流程
https://blog.csdn.net/lxh0113/article/details/142858608?spm=1001.2014.3001.5501
ssr部署
打包
ssr部署在部署后，页面有利于seo，所有的dom元素都能被检索到。
可以执行
nuxt build也可以修改 package.json 文件：
在终端输入
pnpm build
#或者
npm run build
这样子就打包好了，内容会在这个 .output 目录下
安装node和npm
首先需要在服务器上安装 node 和 npm 以及 nginx
可参考该文章
Linux环境安装配置nodejs详细教程_linux安装nodejs-CSDN博客https://blog.csdn.net/qq_40743057/article/details/139139574
安装好后
可使用 xftp 上传文件到（我上传的是 /root/usr）目录
上传该目录，但是由于该文件前缀字符是 . 需要在设置里面选择显示隐藏文件夹
并在该目录下，上传一个 ecosystem.config.cjs(可在本地新建，然后写入内容，进行修改)
在官方给出的配置上，我加了俩行代码，一个是 error_files 和 out_file 这俩个在后续部署很有用，因为部署难免会出现很多错误，但是生产环境难以看到错误在哪里，浏览器下面检查也无法固定到错误问题，这个就能让我们定位到相关错误代码的位置，并去解决问题，它输出的文件在上图有所展示。
module.exports = {
apps: [
{
name: 'demo',
exec_mode: 'cluster',
instances: 'max',
port: '3000',
script: './.output/server/index.mjs',
args: 'start',
error_file: './err.log', // 错误日志存放地址
out_file: './out.log', // 输出日志存放地址
}
]
}pm2配置
上传完毕之后，我们需要安装pm2
安装pm2 是因为需要该 ssr 渲染 ，是实实在在开了一个服务器，所以需要进程管理，有了pm2后，可以对该服务器进行更好的设置，也不会因为服务器掉线而导致网站失效。
安装pm2
npm install pm2 -g
#或者
pnpm install pm2 -g然后在 /root/usr 目录下,执行
pm2 start ecosystem.config.cjs
会出现如下图，这个name指的是 你的 ecosystem.config.cjs 中的name字段，可修改
常用命令
保存服务
pm2 save开机自启(操作系统开机自启)
pm2 startup停止进程
pm2 stop demo #你的进程名字删除进程
pm2 delete demo#你的进程名字另外一种部署：
这个部署需要把 .nuxt nuxt.config.ts package,json 和 public 文件夹 都上传到 服务器。不太推荐该方式，因为该方式有一些弊端：
是因为node_modules文件+public文件内存大小远大于上面方法的.output文件，过多占用服务器内存，其次在下载安装依赖包生成node_modules文件过程中，可能因为环境问题出现下载速度过慢卡顿，兼容报错等问题。
最好新建一个文件夹，然后把这几个文件夹放在一个文件夹内，然后在 该文件夹下的目录下执行
安装依赖
pnpm i
#或者
npm install然后也可以进行pm2配置，如上述步骤是一样的。
错误日志查看：
配置好如上信息后，如若遇到报错，需要查看报错信息，打开 /root/usr 目录下的
就可以查看错误了：
配置nginx
这一步也十分重要，如何安装nginx在我上面提到的 vue3 部署有说哦
安装好nginx后
我们在 nginx.conf 中给到如下内容(因为我们本地的项目服务端口是3000，所以转发到3000端口即可，如果你的端口不一样，也可以修改端口)
server {
listen 80;
listen [::]:80;
#index index.html;
#try_files $uri $uri/ /index.html;
server_name localhost;
#root /root/usr/dist;
# Load configuration files for the default server block.
location / {
proxy_pass http://localhost:3000;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}最后执行 nginx -s reload 即可
踩坑记录：
问题一
我之前遇到了这种情况，就是在打包的时候一直报错，导致无法打包，具体原因是因为这里面的依赖出现了冲突导致打包出现了问题
翻遍了github 尝试了相关解决办法，依旧没有，后面在大佬的建议下是重开了项目，把nuxt版本升到了最高级，然后安装依赖也是按照这个来安装的，网上的安装相关插件多多少少都可能有些问题，看官方的示例会更好。
Nuxt 模块 - Nuxt 中文文档
问题二
后面打包是没问题了，但是在部署的时候还是出现了问题。部署之后，在生产环境是无法知道错误的，所以这个时候就需要错误日志了，
也是尝试了很多办法，最后这个解决方法解决了我的问题
在nuxt.config.ts 下
build: {
transpile: ["vue-router", "@vue/devtools-api"]
},然后完结撒花！！！
