从 Vue CLI 3 热重载 Aframe

Posted 2023-03-23

【中文标题】从 Vue CLI 3 热重载 Aframe

【英文标题】：Hot Reloading Aframe from Vue CLI 3

【发布时间】：2019-08-21 22:33:34

【问题描述】：

我希望能够保存我的 VueJS 文件并在 Aframe 输出（Aframe 组件、纹理等）中查看更改更新。

我目前使用的是 Vue CLI 3，它有自己的 Webpack 开发服务器设置。这对 .Vue 文件很有用，但是当我在 Vue 组件中有一个 <a-entity/> 时，似乎 Aframe 部分在 Aframe 世界中没有正确更新。

例如，我有一个分形框架组件，当我更改包含它的 Vue 文件时，它并没有改变颜色和动画，而是变成蓝色并完全停止移动。我必须重新加载页面才能看到更改生效。

我尝试通过vue.config.js 文件添加aframe-super-hot-loader，但没有成功。

这是我当前的vue.config.js 设置，但不确定如何设置，因为 .vue 文件包含 html 和 JS...

module.exports = 
  chainWebpack: config => 
    config.module
      .rule('aframe-hot-reload')
      .test(/\.vue|.js$/)
      .use('aframe-super-hot-loader')
      .loader('aframe-super-hot-loader')
      .end()
    config.module
      .rule('aframe-hot-reload')
      .test(/\.vue|.html$/)
      .use('aframe-super-hot-html-loader')
      .loader('aframe-super-hot-html-loader')
      .options(
        exclude: /(node_modules)/
      )
      .end()
  

这就是我想做的事情：https://www.youtube.com/watch?v=uh_RQay3x80

【参考方案1】：

Vue HTML 不是 HTML，它是一个被翻译成 JS 的模板。 Vue 有自己的热加载器。 A-Frame 热加载器仅适用于实际的 HTML 和 A-Frame 组件。像往常一样，我不建议使用额外的工具/框架来防止这些混乱和失误。

【讨论】：

明白了。你能给我指出一个可靠的 A 框架设置的样板吗？我注意到您在 A-frame React 的 Github 上提到了“我建议使用带有静态模板的 vanilla A-Frame 和 aframe-state-component”，并且很想看到一个例子。过去几个小时一直在玩 A-frame，真的很酷。谢谢！

我用这样的东西！ github.com/supermedium/aframe-super-hot-loader/tree/master/…