从 Vue CLI 3 热重载框架

Question

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

我目前正在使用 Vue CLI 3，它有自己的 Webpack Dev Server 设置。这对 .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 组件。像往常一样，我不推荐额外的 tooling/frameworks 来防止这些混乱和失误。

从 Vue CLI 3 热重载框架

Hot Reloading Aframe from Vue CLI 3

aframe

vuejs2