在 Vue.js 应用程序中使用自定义 JavaScript 代码

Question

我正在尝试在 Vue.js 路由器应用程序中插入 JavaScript 代码。我需要从提供应用程序的 CMS 加载数据。为了从 CMS 获取数据，我必须使用 CMS 中的 JavaScript 库，该库不是为 Vue 制作的，并且不会像现代 JS 那样导出它的类/函数。所以我通过脚本标签从index.html导入JS库。这按预期工作。

但现在我必须使用这个 CMS JavaScript 库中的类。在将其编写为 Vue-Router 应用程序之前，我只是将 Vue 用于模板目的。所以我在 window.onload 事件处理程序中打包了一些代码。我必须为 CMS 数据访问类创建一个实例。但这会导致构建错误（使用 vue-cli 构建）。由于构建过程中没有可理解的错误消息，我必须使用反复试验。即使是简单的变量赋值似乎var a = 1也是不允许的。console.log('something') 有效。但似乎没有其他允许的（除了定义 onload-event 处理程序）

我已将此代码添加到<script>App.vue 内的标签中（由 vue-cli create 创建）

window.onload = function() {
    
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
}

更新

在测试了答案中的不同解决方案后，我意识到使用非实例变量似乎会导致构建错误。

这给出了一个错误：

        waitForPlayerData = true;

这有效：

        this.waitForPlayerData = true;

Answer 1

1. 你不需要window.onload，你可以把你想要的任何东西放在那里。我不完全确定它在生命周期中的精确渲染时间，也许有人可以跳进来让我们知道，但它肯定会在页面启动时渲染。（尽管它在生命周期挂钩开始之前就已经完成并且它会解决您的需求是有道理的）

2. 如果你想在 Vue 加载之前加载它，更好、更简单的解决方案是将其添加到 main.js 文件中。您拥有完全的控制权，并且可以在 Vue 初始化之前加载它。

那里也不需要 window.onload，只需将其放在初始化 Vue 之前或导入 JS 文件即可，因为它将按顺序初始化。