我对将 @google/model-viewer 集成到nuxtjs项目中有点不知所措:
这是我的 plugins 文件夹中的 * model-viewer.js *
import Vue from "vue";
import modelViewer from "@google/model-viewer";
Vue.use(modelViewer);
我的 * nuxt.config.js * 中的部分
plugins: [
"@/plugins/hooks",
{ src: "@/plugins/gsap", mode: "client" },
{ src: "@/plugins/model-viewer", mode: "client" },
],
。。。和目前为止的组件
<template>
<model-viewer
:src="src"
bounds="tight"
enable-pan
camera-controls
environment-image="neutral"
poster="poster.webp"
shadow-intensity="1"
autoplay
></model-viewer>
</template>
<script lang="ts">
export default {
ssr: false,
name: "Viewer3d",
props: {
src: {
type: String,
required: true,
},
},
setup() {
return {};
},
};
</script>
当调用时,我得到错误
无法编译,出现1个错误friendly-errors 13:36:36
在./node_modules/@google/model-viewer/dist/model-viewer.min.js中出错
友情链接13:36:36
模块解析失败:意外令牌(999:5963)
friendly-errors 13:36:36您可能需要一个适当的加载器来处理此文件类型,目前没有加载器配置为处理此文件。参见https://webpack.js.org/concepts#loaders|* 许可证下的限制。|* *
以及
窗口未定义
从我的浏览器
我错过了什么?我不熟悉nuxt中的加载器,也找不到什么东西来帮助我解决问题。
2条答案
按热度按时间h7appiyu1#
我也遇到了同样的问题,但与NuxtJS。尝试使用旧版本的模型查看器,直到版本1.10.1的一切都适合我。
beq87vna2#
目前,随着NuxtJS将模型查看器库更新到版本3,我已经能够让它工作,直到现在我不得不将它保留在v1.12上,这是最新的对我有效的版本。
plugins文件夹中的model-viewer.js
并且您需要用client-only Package 模型查看器标记