现象
在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的路径:
- 你可以手动修改目录
.output/server/node_modules/@sxzz/popperjs-es -> .output/server/node_modules/@popperjs/core
- 通过命令行
mkdir .output/server/node_modules/@popperjs
mv .output/server/node_modules/@sxzz/popperjs-es .output/server/node_modules/@popperjs/core
- 修改打包命令
// 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打包
通过yarn打包后,目录如下: