Nuxt.js集成@google/model-viewer报编译与window未定义错误如何解决

• @google/model-viewer 是原生Web Components实现的自定义元素，不是Vue插件，原有代码里Vue.use(modelViewer)的写法完全不适用，调用时会触发组件内部对浏览器端window对象的访问，直接抛出window is not defined错误。
• Nuxt默认webpack规则不会转译node_modules目录下的第三方依赖，@google/model-viewer的发行包使用了高版本ES语法，未经过babel转译就会触发Module parse failed: Unexpected token编译错误。
• Vue默认会将模板中未注册的标签识别为Vue组件做解析，未提前声明自定义元素的话还会出现标签未注册的警告。

方案一：本地NPM包集成 #

1. 调整nuxt.config.js配置 #

做三处配置修改：

• 将@google/model-viewer加入构建转译列表，让webpack处理它的语法兼容
• 配置Vue忽略model-viewer标签的组件解析
• 保留插件的客户端执行模式

export default {
  plugins: [
    "@/plugins/hooks",
    { src: "@/plugins/gsap", mode: "client" },
    { src: "@/plugins/model-viewer", mode: "client" },
  ],
  build: {
    transpile: ['@google/model-viewer'],
  },
  vue: {
    config: {
      ignoredElements: ['model-viewer']
    }
  }
}

2. 重写插件文件 #

删除原有Vue.use的错误逻辑，确保包导入逻辑只在浏览器端执行，避免SSR阶段触发浏览器API调用：

// plugins/model-viewer.js
export default async () => {
  if (process.client) {
    await import('@google/model-viewer')
  }
}

3. 调整3D预览组件 #

用Nuxt内置的<client-only>组件包裹模型标签，确保组件仅在客户端挂载，避免服务端渲染 hydration 不匹配问题：

<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 {
  name: "Viewer3d",
  props: {
    src: {
      type: String,
      required: true,
    },
  }
}
</script>

方案二：CDN脚本引入（配置更简单，无编译问题） #

如果本地打包转译反复出现兼容问题，可以直接通过官方CDN引入脚本，完全跳过webpack对@google/model-viewer包的处理，不需要安装对应npm包，也不需要写单独的插件文件：

1. 修改nuxt.config.js，在头部引入官方提供的model-viewer ES模块脚本，同时保留自定义元素忽略配置：

export default {
  head: {
    script: [
      {
        src: 'model-viewer官方ES模块CDN地址',
        type: 'module',
        body: true
      }
    ]
  },
  vue: {
    config: {
      ignoredElements: ['model-viewer']
    }
  },
  plugins: [
    "@/plugins/hooks",
    { src: "@/plugins/gsap", mode: "client" },
    // 移除model-viewer相关的插件注册项
  ]
}

2. 组件部分和方案一的组件写法一致，用<client-only>包裹标签即可。

内容的提问来源于stack exchange，提问作者zero2579