viewer引入样式文件报错

Question

安装v-viewer后引用样式文件报错，这个样式文件不是安装完自带吗？还是说我得在webpack里做点什么？我看了node-modules里的v-viewer部分，但是我看别人也是这样安装的，node包里的内容跟我一样他就不报错，跟安装时候的node和npm版本有关系吗

报错

Error: Cannot find module 'viewerjs/dist/viewer.css'
    at webpackMissingModule (index.ts:2:1)
    at ./src/main.ts (index.ts:2:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:7:1
    at __webpack_require__.

package.json

    "v-viewer": "^3.0.13",
    "vue": "^3.3.4",
"webpack": "^5.88.2",
    "webpackbar": "^5.0.2"

main.ts

import 'viewerjs/dist/viewer.css'//加上这个就报错
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer, {
  defaultOptions: {
    zIndex: 9999,
  },
})

HTML

<template>
  <div v-if="images">
    <img
      v-for="(image, i) in images"
      :key="i"
      :class="['preview-image', cls]"
      :src="
        (image + '').indexOf('https://') > -1
          ? image + '?x-oss-process=image/resize,p_40,w_50,h_50'
          : image
      "
      @click="previewURL(i)"
    />
  </div>
</template>
<script>
  // import 'viewerjs/dist/viewer.css'
  // import { api as viewerApi } from 'v-viewer'
  export default {
    name: 'PreviewImage',
    props: {
      images: {
        type: Array,
        default: function () {
          return []
        },
      },
      cls: {
        type: String,
        default: function () {
          return ''
        },
      },
    },
    created() {},
    methods: {
      previewURL(index) {
        // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
        viewerApi({
          options: {
            initialViewIndex: index,
          },
          images: this.images,
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .preview-image {
    width: 100%;
    height: 100%;
  }
</style>

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

这个问题出现在尝试引入 v-viewer 的样式文件时，报错信息指出找不到 viewerjs/dist/viewer.css
这个模块。这种情况可能是由于模块的路径问题或者安装配置不正确引起的。
根据你提供的信息，你已经尝试引入样式文件 ``` import 'viewerjs/dist/viewer.css'

```，但是出现了报错。这种情况下，我们需要确认以下几点：

1. 确保安装了 v-viewer 和 viewerjs ：首先确保你已经正确地安装了 v-viewer 和 viewerjs 两个模块。可以通过 npm list viewerjs 和 npm list v-viewer 来检查它们是否在你的项目中。
2. 确认安装版本 ：你提供的 package.json 中显示了你使用的 v-viewer 版本是 "^3.0.13"，这是一个符合语义化版本规范的版本号。可以通过 npm show v-viewer versions 来查看所有可用的版本号，并确保你的版本号正确。
3. 检查模块路径 ：检查一下 viewerjs 模块的安装路径和你引入样式文件时的路径是否一致。有时候模块的文件结构可能会有所不同，导致路径不匹配。
4. 检查 webpack 配置 ：如果以上步骤都正确，但仍然报错，可能是 webpack 配置的问题。在 webpack 中引入 CSS 文件时，可能需要额外的 loader 或者配置来处理 CSS 文件。你可以检查一下你的 webpack 配置文件，确保正确地配置了处理 CSS 文件的 loader。
   基于以上可能的原因，下面是一些解决方案的思路：

• 确认依赖安装 ：首先确保你的项目中正确安装了 v-viewer 和 viewerjs，可以尝试重新安装这两个依赖来排除安装问题。
• 检查路径 ：确认一下 viewerjs/dist/viewer.css 文件在你的项目中的实际路径，并且和你的引入路径一致。
• 检查 webpack 配置 ：如果以上两点都没有问题，检查一下你的 webpack 配置文件，确保正确地配置了处理 CSS 文件的 loader，通常需要使用 css-loader 和 style-loader 来处理 CSS 文件。
  如果以上方法都无法解决问题，可以尝试搜索一下相关的解决方案或者查看 v-viewer 的官方文档，看看是否有特殊的配置需要注意。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑