nuxt3打包发布以后出现页面重叠/nuxt3使用pm2部署服务器

1、页面重叠

最近用到了nuxt3去写网站，开发过程很顺利，问题出在打包以后发布服务器，有的页面点了会出现多个页面在一个里面，页面重叠了，头部和底部这部分的公共区域还是一个，只有插入的页面有多个。

注意：检查你的页面是不是完全的静态页面，没有用到js，我的页面多个就是因为是纯静态没有用到js导致这个问题，找了很多网上的方案都没有用，什么修改路由配置啊，最后结果是因为没有用js，最后我用了一个for循环去循环了一个list内容然后就好了

2、nuxt3使用pm2部署服务器

前提：需要配置环境变量

//package.json
 "scripts": {
    "dev": "nuxt dev --dotenv .env.development --exec",
    "test": "nuxt dev --dotenv .env.test --exec",
    "prod": "nuxt dev --dotenv .env.production --exec",
    "build": "nuxt build --dotenv .env.development",
    "build:test": "nuxt build --dotenv .env.test",
    "build:prod": "nuxt build --dotenv .env.production",
    "start": "PORT=2233 node .output/server/index.mjs",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

然后，要在你的项目里面创建一个文件ecosystem.config.cjs

module.exports = {
  apps: [
    {
      name: 'name', // 应用名称
      exec_mode: 'cluster', // 启动模式
      instances: 1, // 启动的实例数量
      args: "start",
      watch     : true,// 监听文件变动并自动重启
      script: '.output/server/index.mjs',// Nuxt 3 编译后生成的启动文件
      env: {
        // 默认环境（例如开发环境）
        NODE_ENV: 'development',
        NITRO_PORT: 5566 // 设置开发环境的端口
      },
      env_production: {
        // 生产环境配置
        NODE_ENV: 'production',
        NITRO_PORT: 5567 // 设置生产环境的端口
      },
      env_staging: {
        // 测试环境配置
        NODE_ENV: 'staging',
        NITRO_PORT: 3000 // 设置测试环境的端口
      }
    }
  ]
}

需要上传服务器的文件，如下图：

注意：打包命令是npm run build:prod

上传到服务器以后执行npm install

然后执行pm2命令启动服务 

 pm2 start ecosystem.config.cjs

输入ip访问查看

注意：如果代码是最新的，然后更新到服务器页面没有更新，这个时候要去服务器查询端口杀掉进程重新启动项目。

命令：（查看端口）

lsof -i :3003

nuxt3本地查看打包后的代码

node .output/server/index.mjs