vue对接unity-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue对接unity。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

业务需求需要前端对接unity,百度一通怎么操作引入。好家伙，是有很多。但是十篇我都没能成功导入unity。所以我决定我踩完坑，自己写一篇分享出来。

首先，方案有两个。一个是引入vue-unity-webgl，一个是直接用iframe引入。ok。知道方案，怎么做呢，因为vue-unity-webgl和iframe都需要路径，怎么引入成了问题。有些个博客叫我新建个static文件专门放unity文件夹。好家伙，一通操作下来，直呼好家伙，全屏错误。两种方式都错，so,求人不行，就求己呗。上个wc放个水，回归思路，static顾名思义是静态文件放置的地方。我用的是脚手架4+版本，只有public。public那就是不编译的，那我就放里面试试。

ok,放进去怎么引入呢，看博客都是写../../这样去找的。我也用了，光荣报错。

好了，废话不多说。直接上两种方案的引入，如下：

首先看文件夹，unity放置public里面，如图：

vue对接unity

unity的文件内容如下：

vue对接unity

其实不管是什么，iframe引入就是index,插件引入是看Build下面的Web.json和UnityLoader.js

iframe方式引入如下：

<iframe
          id="iframe"
          ref="iframe"
          class="iframe"
          src="/unity/index.html"
          width="100%"
          frameborder="0"
          scrolling="auto"
        />

首先，下载vue-unity-webgl这个插件。在需要引入unity的页面引入如下（自己写好，我的注释是因为没用这个）：

vue对接unity

然后在html里面写如下的代码，我放的unity文件夹也是在public里面。代码引入如下：

<unity
      ref="unityVue"
      src="/unity/Build/Web.json"
      width="100%"
      height="450px"
      unity-loader="/unity/Build/UnityLoader.js"
    />

至此，vue项目引入unity成功。

我在项目中用的是iframe的形式引入。因为我需要和unity交互很多，而且中间夹带中文，vue-unity-webgl有人说不能发中文，所以我要避开这个坑，选择了iframe。

至于怎么和unity交互就要在下一篇博客写啦。

最后，啰嗦一下，我的vue.config.js里面的路径设置是publicPath: './'这样的。哦豁，小秃头又秃了不少，下一章前端和unity交互见。文章来源地址https://www.toymoban.com/news/detail-463504.html

到了这里，关于vue对接unity的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！