使用nuxt.js的responsive-loader

Question

我想将responsive-loader集成到我的Nuxt.js项目中，该项目在SPA模式下运行。 （可选我也想添加Vuetify Progressive Image支持）。它将是Netlify的静态托管。

版本：

• “nuxt”：“^ 2.3.4”
• “responsive-loader”：“^ 1.2.0”
• “尖锐”：“^ 0.21.1”

我找到了一些解决方法（https://stackoverflow.com/a/51982357/8804871），但这对我不起作用。当我运行npm run build时，我收到一条错误消息：“TypeError：无法设置属性'exclude'of undefined”

我的构建部分如下所示：

build: {
    transpile: [/^vuetify/],
    plugins: [
  new VuetifyLoaderPlugin()
],

extractCSS: true,
/*
 ** Run ESLint on save
 */
extend(config, { isDev, isClient, isServer }) {
  // Default block
  if (isDev && isClient) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
  }

  if (isServer) {
    config.externals = [
      nodeExternals({
        whitelist: [/^vuetify/]
      })
    ]
  }
  // Default block end

  // here I tell webpack not to include jpgs and pngs
  // as base64 as an inline image
  config.module.rules.find(
    rule => rule.loader === "url-loader"
  ).exclude = /\.(jpe?g|png)$/;
  /*
  ** Configure responsive-loader
  */
  config.module.rules.push({
    test: /\.(jpe?g|png)$/i,
    loader: "responsive-loader",
    options: {
      min: 350,
      max: 2800,
      steps: 7,
      placeholder: false,
      quality: 60,
      adapter: require("responsive-loader/sharp")
    }
  });
}
}

错误可能在本节中找到：

config.module.rules.find(
    rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;

就像说我收到此错误消息：“TypeError：无法设置属性'exclude'of undefined”。

我和vuetify一起运行这个项目。我还想与响应式加载器一起启用Progressive图像支持。有人知道如何一起设置这两个规则吗？ https://github.com/vuetifyjs/vuetify-loader#progressive-images

Answer 1

将responsive-loader集成到Nuxt.js项目中的最简单方法是使用此模块：https://www.npmjs.com/package/nuxt-responsive-loader

免责声明：我创建了模块

Answer 2

您的配置问题依赖于rule.loader属性但规则可以在use或oneOf配置部分中定义。 另一个问题是nuxt内部配置有几个规则与url-loader（图像，视频，字体......）。

在你的情况下，你试图找到规则，有use部分和url-loader在那里定义，这就是为什么你的find函数什么也没找到，并抛出这个错误：

{
    "test": /\.(png|jpe?g|gif|svg|webp)$/,
    "use": [{
        "loader": "url-loader",
        "options": {
            "limit": 1000,
            "name": "img/[hash:7].[ext]"
        }
    }]
}

关于响应式加载器，您应该从responsive-loader规则中删除要使用url-loader处理的扩展，以避免意外行为和冲突，这里是extend函数工作示例：

extend(config, ctx) {
  let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/';
  // find by reg ex string to not rely on rule structure
  let urlRule = config.module.rules.find(r => r.test.toString() === imgTest);

  // you can use also "oneOf" section and define both loaders there.
  // removed images from url-loader test
  urlRule.test = /\.(svg|webp)$/;

  config.module.rules.push({
    test: /\.(png|jpe?g|gif)$/,
    loader: "responsive-loader",
    options: {
      // place generated images to the same place as url-loader
      name: "img/[hash:7]-[width].[ext]",
      min: 350,
      max: 2800,
      steps: 7,
      placeholder: false,
      quality: 60,
      adapter: require("responsive-loader/sharp")
    }
  })
}

是的，它看起来很脏，但我认为这是现在改变一些装载机的唯一方法。

怎么样vuetify - 我认为两个加载器会相互冲突，可能解决方案是使用单个加载器，它将与您的图像一起使用。

希望能帮助到你。

Nuxt更新> = 2.4.0：

他们修改了规则数组请更新以下行：

let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/i';

然后代码应该再次正常工作。