Nuxt 3中使用lightgallery.js出现ERR_MODULE_NOT_FOUND错误的解决求助

问题详情 #

500 [vite-node] [ERR_MODULE_NOT_FOUND] lightgallery/vue

使用环境：

• Nuxt v3.0.0-rc.12
• Vue v3.2.41

用户代码：

<script setup>
import Lightgallery from 'lightgallery/vue'
</script>

<template>
  <lightgallery>
    <a
      data-lg-size="1406-1390"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>"
    >
      <img
        class="img-responsive"
        src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
    <a
      data-lg-size="1400-1400"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@asoshiation' >Shah </a></h4><p> Location - <a href='https://unsplash.com/s/photos/shinimamiya%2C-osaka%2C-japan'>Shinimamiya, Osaka, Japan</a></p>"
    >
      <img
        class="img-responsive"
        src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
    <a
      data-lg-size="1400-1400"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>"
    >
      <img
        style="width: 200px"
        class="img-responsive"
        src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
  </lightgallery>
</template>

解决方案 #

1. 重新安装正确的依赖包 #

lightgallery的Vue3适配包已独立为@lightgallery/vue，先卸载旧包再安装完整依赖：

npm uninstall lightgallery
npm install lightgallery @lightgallery/vue

2. 修正组件导入路径 #

将原导入语句替换为从@lightgallery/vue导入，同时引入必要的CSS样式以保证功能正常：

<script setup>
import Lightgallery from '@lightgallery/vue'
// 引入核心样式及常用插件样式
import 'lightgallery/css/lightgallery.css'
import 'lightgallery/css/lg-zoom.css'
import 'lightgallery/css/lg-thumbnail.css'
</script>

3. 配置Vite依赖优化（可选） #

如果仍存在模块解析问题，在nuxt.config.ts中添加Vite优化配置，确保Vite能正确识别模块：

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['lightgallery', '@lightgallery/vue']
    }
  }
})

4. 全局注册组件（可选） #

若需在多个页面使用lightgallery，可创建Nuxt插件全局注册组件：

1. 项目根目录创建plugins/lightgallery.ts文件：

import Lightgallery from '@lightgallery/vue'
import 'lightgallery/css/lightgallery.css'
import 'lightgallery/css/lg-zoom.css'
import 'lightgallery/css/lg-thumbnail.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Lightgallery', Lightgallery)
})

2. 无需手动导入，直接在模板中使用<lightgallery>标签即可。

内容的提问来源于stack exchange，提问作者gaurav kerkar