Unity WebGL 构建甚至不会出现在 Nuxt/Vue 应用程序中 - 找不到模块 'unity-webgl' 的声明文件

Question

我正在制作一个应该在 Nuxt/Vue 中运行的 WebGL 应用程序。我在 Unity Editor for WebGL 中构建了该应用程序，当我打开 index.html 文件时，它在 Firefox 中完美运行。我尝试将数据导入查看页面video-game.vue。该文件的代码如下：

<template>
  <v-layout column justify-center align-center>
    <v-row>
      <v-col>
        <h2>This is The Secret Authenticate Route</h2>
      </v-col>
    </v-row>

    <v-row style="margin-bottom: 20px">
      <v-col>
        <Unity :unity="unityContext" width="800px" height="600px" />
      </v-col>
    </v-row>
  </v-layout>
</template>

<script>
import UnityWebgl from 'unity-webgl'

const Unity = new UnityWebgl({
  loaderUrl: '~/Build/look-away-webGLbuild1-uncomp.loader.js',
  dataUrl: "~/Build/look-away-webGLbuild1-uncomp.data",
  frameworkUrl: "~/Build/look-away-webGLbuild1-uncomp.framework.js",
  codeUrl: "~/Build/look-away-webGLbuild1-uncomp.wasm"
})

export default {
  name: 'VideoGamePage',
  middleware: "login",
  components: {
    Unity: UnityWebgl.vueComponent
  },
  data() {
    return {
      unityContext: Unity,
      loading: true,
    };
  },

  created() {},

  methods: {},
};
</script>

<style scoped>
</style>

没用，页面是空白的：

我查看了我的 Web 控制台，发现了这个错误：

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Nuxt>
         <VMain>
           <VApp>
             <DefaultLayout> at layouts/default.vue
               <Root>

此外，当我运行应用程序时，在我到达受影响的页面之前，我在我的网络控制台中收到此警告：

./pages/video-game.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/video-game.vue?vue&type=script&lang=js&) 22:16-26"export 'UnityWebgl' was not found in 'unity-webgl'./pages/video-game.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/video-game.vue?vue&type=script&lang=js&) 32:11-21"export 'UnityWebgl' was not found in 'unity-webgl'

当我将鼠标悬停在 unity-webgl

的导入行上时，我在 vscode 终端中注意到了这个错误

Could not find a declaration file for module 'unity-webgl'. '/Users/<myusername>/path/to/app/appFrontend/node_modules/unity-webgl/dist/UnityWebgl.min.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/unity-webgl` if it exists or add a new declaration (.d.ts) file containing `declare module 'unity-webgl';`Vetur(7016)

顺便说一句，也许值得注意的是我正在使用 Google Chrome.

有什么问题吗？在 Nuxt/Vue 应用程序中显示此 Unity 游戏的正确方法是什么？请记住，这在默认 index.html 导出中非常有效。

Answer 1

解决方法是将“Build”文件夹移动到“static”中。不要忘记在 UnityWebgl 创建中更改游戏文件的路径，如下所示：

const Unity = new UnityWebgl({
  loaderUrl: '/Build/look-away-webGLbuild1-uncomp.loader.js',
  dataUrl: '/Build/look-away-webGLbuild1-uncomp.data',
  frameworkUrl: '/Build/look-away-webGLbuild1-uncomp.framework.js',
  codeUrl: '/Build/look-away-webGLbuild1-uncomp.wasm',
})

发现此修复的开发人员还指出，如果您不将 nuxt.config.js 中的 ssr: true, 更改为 ssr: false,，[=] 中的 window 参数16=] 将是 underfined。这使得当您刷新页面时出现此错误：

Unity WebGL 构建甚至不会出现在 Nuxt/Vue 应用程序中 - 找不到模块 'unity-webgl' 的声明文件

Unity WebGL Build Won't Even Appear in Nuxt/Vue App - Could not find a declaration file for module 'unity-webgl'

javascript

vue.js

unity-webgl

nuxt.js