Nuxt3打包构建发布到线上关于@popperjs/core的踩坑过程及解决方法

230 阅读1分钟

由于我在使用nuxt3执行build命令发布到线上后报错

0dbbfb93abaa60359e43aced530dfbe.png 一系列的排查原因发现之所以报错是因为其内部element-plus使用了一个叫@popperjs/core的包其里面依赖的是require加载依赖所以会有冲突版本降至了《《npm:@sxzz/popperjs-es@^2.11.7》》 但是由于nuxt不支持pnpm的软链接模式,所以导致了就算版本正确也还是会报错。原因是因为npm和pnpm的@popperjs/core包的位置不一样所以会产生错误具体方法是在执行build命令时把命令换成

nuxi build && mkdir .output/server/node_modules/@popperjs && mv .output/server/node_modules/@sxzz/popperjs-es .output/server/node_modules/@popperjs/core

image.png 我是通过pm2的方式进行部署的,也可以进行node的部署,以下是pm2的部署方式 1.1

image.png 把打包好的.output文件放置在服务器里然后再放上一个第三个的js文件这个在nuxt3的官网里有参考 代码参考如下

  apps: [
    {
      name: '####',  // 设置启动项目名称
      exec_mode: 'cluster',
      instances: 'max',
      // 注意这里的相对路径。要访问到index.mjs就行了,如果你是整个.output一起放在服务器的话就和官方一样路写成./.output/server/index.mjs就好了
      script: './.output/server/index.mjs'
    }
  ]
}

然后在服务器里下载node和pm2 在放置js的目录执行

1.执行项目
pm2 start ecosystem.config.js
2.设置pm2的自动重启
pm2 startup

这样子直接访问项目就可以了