【nuxt3】nuxt3.*无法将 @popperjs_core 打包，浏览器显示500

现象

在nuxt3中引入Element Plus后，可以正常运行 pnpm run dev，运行 pnpm run build 后，可以正常运行 node ./.output/server/index.mjs，此时一切正常
将 .output 中的文件复制到其他空文件夹中后，执行 node ./.output/server/index.mjs ，然后在浏览器中打开页面显示 500，命令行提示如下错误，部署到服务器同样的结果：

[nuxt] [request error] [unhandled] [500] Cannot find package '@popperjs/core' 
  		imported from /Users/gaochunfa/Desktop/.output/server/node_modules/element-plus/es/components/popper/src/content.mjs
  at new NodeError (node:internal/errors:405:5)  
  at packageResolve (node:internal/modules/esm/resolve:887:9)  
  at moduleResolve (node:internal/modules/esm/resolve:936:20)  
  at defaultResolve (node:internal/modules/esm/resolve:1129:11)  
  at nextResolve (node:internal/modules/esm/loader:163:28)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)  
  at link (node:internal/modules/esm/module_job:76:36)

原因

运行时提示缺少 @popperjs/core，目前内部使用的 @popperjs/core 实际上是指向 @sxzz/popperjs-es，应该是 Nuxt 目前不支持这种软链接。

解决方案

更改popperjs的路径：

1. 你可以手动修改目录

.output/server/node_modules/@sxzz/popperjs-es -> .output/server/node_modules/@popperjs/core

2. 通过命令行

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

3. 修改打包命令

// package.json中

• “build”: “nuxi build”,

• “build”: “nuxi build && mkdir .output/server/node_modules/@popperjs && mv .output/server/node_modules/@sxzz/popperjs-es .output/server/node_modules/@popperjs/core”,

更改pnpm配置，配置 .npmrc

shamefully-hoist=true
node-linker=hoisted
public-hoist-pattern=*

在 pnpm 中，node-linker 用于指定如何链接依赖包。hoisted 是 node-linker 的一种模式，其作用是将所有依赖的模块都安装在项目根目录的 node_modules 下，而不是每个项目都有自己的 node_modules 目录。这意味着，如果多个项目依赖相同的包，该包只会在根目录的 node_modules 中安装一次，而不是在每个项目中都安装一次
**
public-hoist-pattern=*** 是 pnpm 中与 hoisting 相关的配置之一。Hoisting 是一种优化技术，用于减少重复的模块安装，将它们提升到共享的祖先 node_modules 目录中。这有助于减小项目的磁盘占用和提高安装速度。
具体到 public-hoist-pattern=，这个配置表示将所有的依赖都 hoist 到项目的根 node_modules 目录中。**** 是通配符，表示匹配所有的依赖。
这种配置的效果是，项目中的所有依赖都会被 hoist（提升），并放置在项目的根目录的 node_modules 中，而不是各个子项目的独立 node_modules 目录中。这可以带来一些优势，例如减小磁盘占用，加快安装速度，但也可能引入一些潜在的依赖冲突问题，因为不同项目可能需要不同版本的同一个依赖。

使用yarn打包

参考链接：

https://github.com/element-plus/element-plus/issues/10979

https://github.com/nuxt/nuxt/issues/12493