Question

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

我当前正在使用Vue CLI 3，它具有自己的Webpack Dev Server设置。这对于.Vue文件非常有用，但是当我在Vue组件中有一个<a-entity/>时，似乎Aframe部分在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组件。和往常一样，我不建议您使用额外的工具/框架来防止此类混乱和失误。

从Vue CLI 3重装Aframe

1 个答案: