为什么我在vue3项目中引入glowscript会找不到

我在github上下载了Glowscript的glow.3.2.min.js 并且在index.html中引入了 但是在组件中使用的时候一直说找不到Glowscript 去main.js添加全局变量也没用 就是找不到 路径也没问题啊 真的救大命 卡了两天了

在 Vue3 项目中引入 Glowscript 可能会出现找不到的情况，这是因为 Vue3 默认使用了 ES Module 的方式进行模块化管理，而 Glowscript 使用的是 CommonJS 的方式进行模块化管理，两者不兼容。为了解决这个问题，可以使用以下方法进行修改：

1.安装 rollup-plugin-commonjs 和 rollup-plugin-node-resolve：

npm install rollup-plugin-commonjs rollup-plugin-node-resolve --save-dev

2，在 rollup.config.js 中添加以下配置：

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
export default {
  // ...
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    commonjs()
  ]
}

3.在 main.js 中添加以下代码：

// main.js
import Vue from 'vue'
import App from './App.vue'
import * as glow from './assets/glow.3.2.min.js'
// 注册全局变量
window.Glow = glow
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

4.在组件中使用 window.Glow 对象，例如：

export default {
  mounted() {
    const canvas = window.Glow.embed('glowscript', { width: 500, height: 400 })
  }
}

我印象我也有这个问题，不过我问了gpt解决就，你试试

您好,可以贴点代码吗.您说的这个glow.js 是写智慧平台用的吗

单单是在main.js中配置就已经找不到路径了，会显示文件不存在

img

在index.html中则可以找到路径，但是实际上使用的时候仍然会说找不到glowscript对象

img

我再次检查了代码 我再index.html中引入了文件，并发现有被正确加载，打印版本也正常，可是在使用中就是会遇到各问题

img

img

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 以下回答来自chatgpt:

    [答案]: 1. 可以请用户提供具体的错误提示信息，以便更好地判断问题所在。 2. 请用户检查路径是否正确，建议使用绝对路径来引入Glowscript，并注意路径的大小写和斜杠方向是否正常。 3. 如果是在单个组件中使用Glowscript，建议在组件中使用mounted钩子函数引入Glowscript并执行对应的代码。如下所示：

    <template>
  <div ref="canvas"></div>
</template>

<script>
import gs from '../../path/to/glow.3.2.min.js'

export default {
  mounted() {
    gs.onload = () => {
      const canvas = this.$refs.canvas;
      canvas.innerHTML = `<script> ...your script goes here... </script>`;
    };
  }
}
</script>

    在以上代码中，我们通过import引入了Glowscript，并在组件的mounted钩子函数中在Glowscript加载完成后，找到组件中的canvas元素，并将Glowscript的代码（通过innerHTML）插入其中。

    1. 如果用户已经在终端使用npm或yarn安装了glowscript模块，并使用模块化引入Glowscript，但问题仍未解决，可以考虑卸载模块并尝试其他解决方案。

    2. 除了在main.js中添加全局变量，用户还可以尝试其他方法，比如直接在组件中引入Glowscript或者在template中使用script标签引入。在这些方法中，需要特别注意Glowscript的运行时机和引入方式。可以参考以下代码示例：

    （1）在组件中直接引入Glowscript并执行代码：

    <template>
  <div ref="canvas"></div>
</template>

<script src="../../path/to/glow.3.2.min.js"></script>
<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    canvas.innerHTML = `<script> ...your script goes here... </script>`;
  }
}
</script>

    （2）在template中使用script标签引入并执行Glowscript代码：

    <template>
  <div ref="canvas"></div>
  <script src="../../path/to/glow.3.2.min.js"></script>
  <script>
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "<script> ...your script goes here... </script>";
  </script>
</template>

    在以上代码中，我们也是通过在组件中找到对应的canvas元素，并将Glowscript的代码（通过innerHTML）插入其中。同样需要注意Glowscript的运行时机和引入方式。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^