在 Nuxt 中使用Sharp包的问题

Posted 2023-02-22

【中文标题】在 Nuxt 中使用Sharp包的问题

【英文标题】：issue using sharp package in Nuxt

【发布时间】：2021-09-21 05:34:43

【问题描述】：

我尝试在我的 Nuxt 项目中使用它，但在编译时失败了

在我的插件/sharp.js 中

import vue from "vue"
import sharp from "sharp"
vue.use(sharp)

还有我的 nuxt.config.js

plugins: [
  '~plugins/sharp.js',
],

编译时我的终端出现错误

Failed to compile with 4 errors                                                                                               friendly-errors 01:16:19  

These dependencies were not found:                                                                                                    friendly-errors 01:16:19  
                                                                                                                                      friendly-errors 01:16:19  
* child_process in ./node_modules/detect-libc/lib/detect-libc.js, ./node_modules/sharp/lib/libvips.js                                 friendly-errors 01:16:19
* fs in ./node_modules/detect-libc/lib/detect-libc.js, ./node_modules/sharp/lib/libvips.js                                            friendly-errors 01:16:19  
                                                                                                                                      friendly-errors 01:16:19  
To install them, you can run: npm install --save child_process fs  

【问题讨论】：

@kissu 不，它没有帮助，我已经用解释回复了你的答案。

【参考方案1】：

sharp 是一个 Node.js 包，因此这不适用于 Vue。至少，不在客户端上下文中。

您最好提前或通过 Cloudinary 之类的服务来优化您的图像。

【讨论】：

所以对于我正在做的事情来说，使用 Cloudinary 可能会非常昂贵，所以这不是一个选择。如果我能以某种方式让它工作，sharp 本来是完美的，因为我不希望我要上传的图像先发送到 API，然后发送到 AWS S3。因此，我正在寻找可以在将图像直接发送到 AWS S3 之前在前端转换图像的选项

@OpeyemiOdedeyi 我的意思是，你不能在 Nuxt 中使用sharp，至少不能以简单的方式 IMO。因为你仍然可以用它做一些 Node.js 逻辑，但它会复杂得多，特别是如果你确实将你的应用程序用作 target: static。此外，我不确定将 Nuxt 用于前端和图像处理是否是一个好主意，服务器可能会在同时使用这两种方法时遇到很大的困难。最后，您应该在 Nuxt one 和 S3 之间使用中间件应用程序进行图像处理。将您的图像从 Nuxt 发送到中间件，在那里对其进行优化，然后将其上传到 S3。然后获取 URL。

【参考方案2】：

我对 react 也有同样的问题。我使用库 npm react-sharp。 我认为 paket npm vue-sharp 也是如此。

【讨论】：

欢迎提供解决方案链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最多的您链接到的页面的相关部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.