时间戳

首页 > 解决方案 > 配置 Vue 加载器和惰性大小以使用 Nuxt 转换 url

javascript - 配置 Vue 加载器和惰性大小以使用 Nuxt 转换 url

问题描述

我正在尝试使用 Nuxt 配置惰性大小，而我的 url 没有由 Webpack 处理，因此出现 404 错误。我得到了路径src="~/assets/img.png"而不是src="/_nuxt/assets/img.png". 我将lazysizes作为 npm 包和以下内容添加到我的nuxt.config.js文件中。

   /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '~/plugins/lazysizes.client.ts',
  ],
  /*
   ** Build configuration
   */
  build: {
    extend(_config, { isClient, loaders: { vue } }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        vue.transformAssetUrls.img = ['src', 'data-src']
      }
    },
  },

而这个内容plugins/lazysizes.client.ts

import lazySizes from 'lazysizes'
export default lazySizes

为了尽量减少复制，我只使用这样一个非常简单的图像。

<img
  class="lazyload"
  data-src="~/assets/img.png"
  alt="Image description"
  loading="lazy"
/>

我完成了这篇文章https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm。

标签： javascripthtmlwebpacknuxt.jsvue-loader

解决方案

找到了答案！如果有人来到这里，以供将来参考，我阅读这篇文章https://medium.com/@dannjb/a-lazy-loading-image-component-for-nuxt-js-c34e0909e6e1解决了它。

As I run SSR using yarn generate, I need the asset url transform to happen on the server too; the isClient check is removed.

删除isClient对 SSR 的检查后，我开始工作了！

推荐阅读