Question

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

版本：

“ nuxt”：“ ^ 2.3.4”
“响应式加载程序”：“ ^ 1.2.0”
“锐利”：“ ^ 0.21.1”

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

我的构建部分如下所示：

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'” 。

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

Answer 1

您的配置问题取决于它的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';

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

Answer 2

将响应加载程序集成到Nuxt.js项目中的最简单方法是使用以下模块：https://www.npmjs.com/package/nuxt-responsive-loader

免责声明：我创建了模块

使用nuxt.js的响应式加载器

2 个答案:

更新Nuxt> = 2.4.0：