时间戳

首页 > 解决方案 > 使用 nuxt.js 的响应式加载器

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

问题描述

我想将responsive-loader集成 到我在 SPA 模式下运行的 Nuxt.js 项目中。（可选的，我还想添加 Vuetify Progressive Image 支持）。这将是一个带有 Netlify 的静态主机。

版本：

我找到了一些解决方案（https://stackoverflow.com/a/51982357/8804871），但这对我不起作用。当我运行npm run build时 ，我收到一条错误消息：“TypeError: Cannot set property '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: Cannot set property 'exclude' of undefined”。

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

标签： vue.jswebpackvuejs2nuxt.js

解决方案

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

免责声明：我创建了模块

推荐阅读