Nuxt3部署-EW帮帮网

最近接了一个项目，需要用到 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"]
  },

然后完结撒花！！！

Nuxt3部署