我有一些 EXTERNAL 脚本需要加载到各种页面上，例如 Google Places Autocomplete、Facebook API 等。
显然，在每条路线上都加载它们没有意义，但是文档没有解决这种相当常见的情况。
此外，Vue 实例安装在正文中的标签上，因为
在所有情况下，挂载的元素都将替换为 Vue 生成的 DOM。因此不建议挂载根实例 到 或
。
现实世界的应用程序目前如何处理这种情况？
【问题讨论】：
require() 或import。它允许您动态加载每个组件的脚本。您需要确保 npm install 依赖项。
标签： javascript vue.js
我推荐使用https://www.npmjs.com/package/vue-head，它的设计目的就是将你想要的数据从你的组件注入到文档的头部。 非常适合 SEO 标题和元标记。
这样使用：
export default {
data: () => ({
title: 'My Title'
}),
head: {
// creates a title tag in header.
title () {
return {
inner: this.title
}
},
meta: [
// creates a meta description tag in header.
{ name: 'description', content: 'My description' }
]
}
}
【讨论】：
这在文档中没有解决，因为这不是 Vue 的工作。 Vue 旨在创建单页应用程序（SPA）等。在单页应用程序中，您通常会在网站首次加载时加载所有供应商脚本（Google、Facebook 等）以及您自己的脚本和样式。
许多现实世界的应用程序只是使用 Webpack、Gulp、Grunt 或其他一些捆绑工具将所有供应商脚本捆绑到一个文件中（例如：vendor.js）。理由是您可以将所有这些脚本打包到一个文件中，将它们缩小，使用 gzip 压缩来提供它们，然后它只是一个请求。
如果您使用 require() 或 import 导入模块，更智能的打包工具（如 Webpack 和 Browserify）可以遍历依赖关系树。这可以让您将依赖项拆分为多个逻辑块，以便组件和库仅在加载它们自己时才加载它们的依赖项。
【讨论】：
我们也遇到过这个问题。我们通过其他方式加载 JavaScript。我们创建了一个库来为我们做这件事（又快又脏，观察浏览器事件并添加 JavaScript 标签）。这个库还实现了一个中介模式 (https://addyosmani.com/largescalejavascript/#mediatorpattern)，一旦所有库都加载完毕，就会在最后触发一个“page:load”事件（为我们自定义）。 我们的 VueJS 组件仅在该事件触发时执行。这也允许我们将 Vue 组件放在 header 标签而不是 body 中，因为浏览器会加载它，但在事件触发之前不会执行该函数。
var loadVueComponents=function()
{
var myComponents=new Vue({....});
};
Mediator.subscribe("page:load",loadVueComponents);
在我因不使用 Webpack 或任何其他工具而被否决之前，这是一个带有大量 JavaScript 的旧应用程序（有些无法缩小，甚至无法与其他文件连接/捆绑），我们需要添加一些新组件（现在使用 Vue）并尝试尽可能少地破坏现有页面（中介模式已经实现并基于页面属性加载动态库）
【讨论】：
我认为您正在谈论一些不属于节点模块的外部 JS，并且想要从外部源（http://your-external-script）检索，那么您可以动态加载 JS 脚本标签。将此代码放在过渡事件之前的某个地方，就像您第一次登陆 SPA 屏幕一样。
var script = document.createElement('script');
script.src = "htpps://your-external-script.js";
document.head.appendChild(script); //or something of the likes
这将使您的外部文件在全局范围内可用，然后您可以在任何地方使用它。
注意：这种情况是您没有为库设置节点模块或者您不想作为加载模块放置
【讨论】：