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

Question

我正在制作一个WebGL应用程序，应该在Nuxt/Vue中工作。我在WebGL的Unity中构建了这个应用程序，当我打开index.html文件时，它在火狐中工作得很好。我试图将数据导入视图页面视频-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'

我注意到在vscode终端中出现了这个错误，当我悬停在导入行上进行unity webgl时。

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)

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

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

Answer 1

修复方法是将"Build“文件夹移动到”静态“。不要忘记在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',
})

发现此修复的开发人员还指出，如果不将ssr: true,更改为ssr: false, in nuxt.config.js，则look-away-webGLbuild1-uncomp.loader.js中的window参数将是underfined。这使得当您刷新页面时会得到以下错误：

​