vue.js google/nuxt模型浏览器

c86crjj0  于 2023-05-07  发布在  Vue.js
关注(0)|答案(2)|浏览(186)

我对将 @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中的加载器,也找不到什么东西来帮助我解决问题。

h7appiyu

h7appiyu1#

我也遇到了同样的问题,但与NuxtJS。尝试使用旧版本的模型查看器,直到版本1.10.1的一切都适合我。

beq87vna

beq87vna2#

目前,随着NuxtJS将模型查看器库更新到版本3,我已经能够让它工作,直到现在我不得不将它保留在v1.12上,这是最新的对我有效的版本。
plugins文件夹中的model-viewer.js

import '@google/model-viewer';

并且您需要用client-only Package 模型查看器标记

<template>
      <client-only>
        <model-viewer
          :src="src"
          bounds="tight"
          enable-pan
          camera-controls
          environment-image="neutral"
          poster="poster.webp"
          shadow-intensity="1"
          autoplay
        ></model-viewer>
      </client-only>
    </template>
    <script lang="ts">
    export default {
      ssr: false,
      name: "Viewer3d",
      props: {
        src: {
          type: String,
          required: true,
        },
      },
      setup() {
        return {};
      },
    };
    </script>

相关问题