2

所以，想象一下 Vueindex.html还加载了一些自定义脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    ...
    <script type="text/javascript">
    languagePluginLoader.then(function () {
        pyodide.loadPackage("someName").then(() => {
            // Send message to Vue that everything is fine
        }).catch((err) => {
            // Send message to Vue that it failed
        })
    })
    </script>
    ...
    ...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

有没有办法从文件中与正在运行的 Vue 实例或/和 Vuex 进行通信index.html？例如，我想在脚本完全加载之前显示“正在加载...”等。

  • 一种方法是将消息发送到 service worker，然后从 service worker 发送到 Vue，但感觉不切实际。

  • 另一种方法是windows.script_status = true在初始化之后设置，但是window对象不是响应式的，所以 Vue 会检查一次，获取undefined并忘记它。

  • script.onloadUPD：第三种方法是从 Vue 端注入脚本，并在它准备好时放入一些函数，但不确定解决方案有多稳定。

所以，任何建议都可以:)

4

2 回答 2

1

我会走外部事件中心的路线。由于 Vue 3 删除了 $on、$off 和 $once 实例方法，事件中心的官方迁移策略是使用外部库，例如mitt。使用例如 mitt，一旦加载了其他自定义脚本，您应该能够轻松地向 Vue 发出信号。

于 2020-10-26T21:15:11.823 回答
0

解决方案是第三个 - 手动注入脚本mounted并将所有逻辑放入script.onload其中。谷歌地图示例：

mounted: function () {
    if (window.google && window.google.maps) {
        this.create_map();
        return;
    }

    var self = this;
    var script = document.createElement("script");
    script.onload = function () {
        if (!window.google && !window.google.maps)
            return void (console.error("no google maps script included"));

        self.create_map();
    };

    script.async = true;
    script.defer = true;
    script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
    document.getElementsByTagName("head")[0].appendChild(script);
}

从另一个 SO 问题的答案中挑选逻辑：https ://stackoverflow.com/a/45605316/1598470 。

于 2020-10-26T20:49:41.847 回答