nuxt 3 中的 nuxt/image 模块导致生产出现问题

Question

使用 Nuxt/Image 模块并构建应用程序时，图像 URL 将更改为

https://domain.x/_ipx/_/images/foods/Appetizaer/Garlic-Bread.png

。但是，由于错误而无法加载图像。单击提供的链接将显示以下消息：

[500] [IPX_ERROR]
Something went wrong installing the "sharp" module
Cannot find module '../build/Release/sharp-linux-x64.node'\nRequire stack:
- /var/www/domain.x/.output/server/node_modules/sharp/lib/sharp.js\n- /var/www/domain.x/.output/server/node_modules/sharp/lib/constructor.js
- /var/www/domain.x/.output/server/node_modules/sharp/lib/index.js
Possible solutions:
- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
- Install for the current linux-x64 runtime: "npm install --platform=linux --arch=x64 sharp"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "^1.0.0",
    "autoprefixer": "^10.4.16",
    "nuxt": "^3.9.0",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.6",
    "sass": "^1.69.4",
    "sharp": "^0.33.1",
    "tailwindcss": "^3.3.3",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "swiper": "^11.0.5"
  },
  "prettier": {
    "plugins": [
      "prettier-plugin-tailwindcss"
    ]
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  css: ["~/assets/styles/css/main.css"],
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("swiper-"),
    },
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: ["@nuxt/image"],
});

即使在项目中安装Sharp包后，问题仍然存在，并且无法加载图像。值得一提的是，在我的本地计算机上一切正常，但是当将项目部署到 Ubuntu 服务器上时，问题就出现了。 在服务器上需要采取什么重要步骤吗？我应该怎么做才能解决这个问题？

我尝试安装 Sharp 软件包并对 Nuxt 3 配置文件进行更改，但这些解决方案都没有解决问题。

Answer 1

我找到了解决办法。 安装

npm rebuild --arch=x64 --platform=linux --libc=musl sharp

软件包后，我必须使用

shark

在生产模式下添加 linux 二进制文件。