从 Vue CLI 3 热重载 Aframe

Question

我希望能够保存我的 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

Answer 1

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