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

我正在尝试在Vue.js路由器应用程序中插入JavaScript代码。我需要从应用服务的CMS加载数据。为了从CMS中获取数据，我必须使用CMS中的JavaScript库，它不是为Vue设计的，也不是像现代JS那样导出它的类/函数。因此，我通过一个脚本标记从index.html中导入JS库。这正是我们想要的

但是现在我必须使用这个CMS JavaScript库中的类。 在将其作为Vue路由器应用程序编写之前，我只是将Vue用作模板。 因此，我在window.onload事件处理程序中打包了一些代码。 我必须为CMS数据访问类创建一个实例。 但这会导致生成错误（使用vue cli生成）。从那以后 生成过程中没有可理解的错误消息 我必须使用试错法。即使是像

var a=1

这样的简单变量赋值似乎也不被允许。 console.log（'something'）可以工作。但似乎不允许任何其他操作（除了定义onload事件处理程序）

我已在App.vue（由vue cli创建）内的

标记中添加了此代码

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

这会产生一个错误：

        waitForPlayerData = true;

这项工作：

        this.waitForPlayerData = true;

你不需要window.onload，你可以把你想要的东西放在那里。我不完全确定它在生命周期中呈现的确切时间，也许有人可以跳进来让我们知道，但它肯定会在页面启动时呈现。（虽然它在生命周期挂钩开始之前就开始了，而且它会解决您的需求，这是有道理的）

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

---

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

我不建议使用

window.load

来运行代码。在Vue.js中有更多本机方法可以实现这一点

如果您想在加载应用程序之前在应用程序的主组件中运行它，您应该做的是在创建主组件的

生命周期挂钩之前将代码放入
中

。。。
在创建（）之前{
this.cmsDataLoader（）
},
方法：{
cmsDataLoader（）{
试一试{
//实例化用于CMS数据访问的obj类
cmsDataAccessObj=新的CMSAccessData（）；
waitForPlayerData=true；
}
捕获（e）{
控制台错误（e）；
}
}
}
...

这将在每次创建组件之前运行代码。如果要在创建组件后运行
创建的
生命周期挂钩，也可以使用
生命周期挂钩

查看以下链接以了解有关的详细信息。
在Vue.js应用程序中放置JavaScript的最佳方法是
挂载
函数，该函数在加载组件时调用：

导出默认值{
名称：“组件名称”，
安装的（）{
让数组=document.querySelectorAll（'.list_item'）；
},
}
如果我在main.js中放了一些东西，构建就会失败。特别是如果我只是进行一些变量初始化。只有console.log语句在那里工作。如果我把代码放在onload事件处理程序内部，或者放在任何函数外部，都没有什么区别。我不确定让代码为每个组件运行是否好。我只需要在整个应用程序开始时运行它，并访问每个组件中的对象/实例。CMSAccessData设计用于初始化整个CMS通信。此外，真正的数据交换是由另一个CMS自定义事件处理程序完成的，数据被传递到该处理程序。它不会在每个组件中运行，只会在主App.vue中运行，我猜它是具有router视图的。我已将此测试代码添加到我的App.vue主组件：
导出默认值{beforeCreate（）{this.cmsDataLoader（）；}，方法：{cmsDataLoader（）{waitForPlayerData=true；}}}它也给了我一个构建错误，关于在哪里添加代码，钩子似乎是一个很好的地方，也是Vue文档推荐的。你得到了什么构建错误？我认为您必须导入
CMSAccessData
类才能实例化它。
        this.waitForPlayerData = true;