带有nuxt的google/model-查看器

Question

对于将https://github.com/google/model-viewer集成到nuxtjs项目中，我有点不知所措：

这是插件文件夹中的模型-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>

当我被召唤时，我得到了错误

编译失败，一个错误友好-错误13:36:36 ./node_modules/@google/model-viewer/dist/model-viewer.min.js中的误差 友谊赛-错误13:36:36 模块解析失败:意外令牌(999:5963) 友好-错误13:36:36您可能需要一个适当的加载程序来处理这个文件类型，目前还没有配置加载程序来处理这个文件。请参阅许可证下的https://webpack.js.org/concepts#loaders \*限制。*/

和一个

窗口未定义。

从我的浏览器。

我遗漏了什么？我不熟悉nuxt中的加载器，也无法找到帮助我解决问题的东西。

Answer 1

我也有同样的问题，但在NuxtJS。试着使用模型查看器的旧版本，直到1.10.1版本才适用于我。