[vite]: Rollup无法解析来自“image”的导入

huangapple go评论65阅读模式
英文:

[vite]: Rollup failed to resolve import "image" from

问题

I'm here to help with the translation. Here's the translated content:

遇到了关于我的 Vue 3 Vuetify SPA 的问题。我可以顺利运行 npm run dev,并加载资源,但当我运行 npm run build 时,它无法构建并出现以下错误:

✓ 在 3.25 秒内构建完成
[vite]: Rollup 未能解析从 "/Users/zachhandley/Documents/GitHub/OBrians/vuetify/src/views/Gallery.vue?vue&type=script&setup=true&lang.ts" 导入的 "image" 模块。
这很可能是意外的,因为它可能在运行时破坏您的应用程序。
如果您确实希望将此模块外部化,请明确将其添加到 "build.rollupOptions.external"。
构建期间出错:
错误:[vite]: Rollup 未能解析从 "/Users/zachhandley/Documents/GitHub/OBrians/vuetify/src/views/Gallery.vue?vue&type=script&setup=true&lang.ts" 导入的 "image" 模块。
这很可能是意外的,因为它可能在运行时破坏您的应用程序。
如果您确实希望将此模块外部化,请明确将其添加到 "build.rollupOptions.external"。
    at viteWarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46546:23)
    at onRollupWarning (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46570:9)
    at onwarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46317:13)
    at Object.onwarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:25287:13)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:23922:26)
    at file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:23882:26

我不知道是什么原因导致这个问题,我在画廊页面上导入的唯一 "image" 是:

const imagePaths = import.meta.glob("@/assets/gallery/*.*", {
  as: "imagePath",
});

另外,作为一点注意,如果我使用 import.meta.glob("../../assets/gallery/*.*" 导入它,它不会加载任何图像。

这可能是什么原因导致的?我可以采取什么步骤来解决它?

英文:

having an issue with my Vue 3 Vuetify SPA. I can run npm run dev just fine, and it loads assets, but when I run npm run build it fails to build with the error

✓ built in 3.25s
[vite]: Rollup failed to resolve import "image" from "/Users/zachhandley/Documents/GitHub/OBrians/vuetify/src/views/Gallery.vue?vue&type=script&setup=true&lang.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "image" from "/Users/zachhandley/Documents/GitHub/OBrians/vuetify/src/views/Gallery.vue?vue&type=script&setup=true&lang.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46546:23)
    at onRollupWarning (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46570:9)
    at onwarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/vite/dist/node/chunks/dep-a178814b.js:46317:13)
    at Object.onwarn (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:25287:13)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:23922:26)
    at file:///Users/zachhandley/Documents/GitHub/OBrians/vuetify/node_modules/rollup/dist/es/shared/node-entry.js:23882:26

I have no idea what could cause this, the only "image" that I import on the gallery page is

const imagePaths = import.meta.glob("@/assets/gallery/*.*", {
  as: "imagePath",
});

also as a side-note if I import it using import.meta.glob("../../assets/gallery/*.* it does not load any images.

What could cause this / what steps can I take to fix it?

答案1

得分: 0

The lazy-src="image" line was causing the error.

英文:

Turns out the problem was a really stupid issue

inside my component I was using v-img from Vuetify

<v-img
        v-for="(src, index) of images"
        :key="src"
        class="mx-auto pageGallery__img--img"
        :src="src"
        lazy-src="image"
        cover
        @click="changeShowImage(index)"
      >
        <template v-slot:placeholder>
          <div class="pageGallery__placeholder">
            <v-progress-circular color="accent" indeterminate size="64" />
          </div>
        </template>
      </v-img>

The lazy-src="image" line was causing the error.

huangapple
  • 本文由 发表于 2023年5月7日 04:05:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76190895.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定