配置Vue加载程序和lazysizes以使用Nuxt转换URL

问题描述

我正在尝试使用Nuxt配置lazysize，并且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。

解决方法

找出答案！如果有人来这里，以供将来参考，我会阅读本文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检查后，我开始使用它了！