英文:
[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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论