Question

我有一些EXTERNAL脚本需要加载到各种页面上，例如Google Places Autocomplete，Facebook API等。

显然，在每条路线上加载它们都没有意义，但文档并未解决这种相当常见的情况。

此外，由于

，Vue实例将安装到正文中的标记上

在所有情况下，已安装的元素将替换为Vue生成的DOM。因此，不建议安装根实例到＆lt; html＆gt;或者＆lt;身体＆gt;。

现实世界的应用程序目前如何处理这种情况？

Answer 1

这并未在文档中解决，因为它不是Vue的工作。 Vue用于创建单页面应用程序（SPA）。在单页面应用程序中，您通常会在首次加载网站时加载所有供应商脚本（Google，Facebook等）以及您自己的脚本和样式。

许多真实应用程序只是使用Webpack，Gulp，Grunt或其他一些捆绑工具将所有供应商脚本捆绑到一个文件中（例如：vendor.js）。基本原理是您可以将所有这些脚本打包到一个文件中，缩小它们，使用gzip压缩服务它们，然后它只需要一个请求。

如果您使用require()或import导入模块，Webpack和Browserify等智能捆绑包可以遍历依赖关系树。这可以允许您将依赖项拆分为多个逻辑块，因此组件和库只会加载其依赖项（如果它们本身已加载）。

Answer 2

我建议使用https://www.npmjs.com/package/vue-head，它的设计正是为了将您想要的数据从页面注入文档的头部。非常适合SEO标题和元标记。

要像这样使用：

export default {
  data: function () {
    return {
      title: 'My Title'
    }
  },
  // Usage with context the component
  head: {
    // To use "this" in the component, it is necessary to return the object through a function
    title: function () {
      return {
        inner: this.title
      }
    },
    meta: [
      { name: 'description', content: 'My description' }
    ]
  }
}

Answer 3

我们也有这个问题。我们通过其他方式加载JavaScripts。我们创建了一个为我们执行此操作的库（快速和脏，观察浏览器事件和添加JavaScript标记）。该库还实现了一个中介模式（https://addyosmani.com/largescalejavascript/#mediatorpattern）触发了一个＆＃34; page：load＆＃34;一旦加载了所有库，最后（我们自定义）。我们的VueJS组件仅在该事件触发时执行。这也允许我们将Vue组件放在header标签而不是body中，因为浏览器会加载它，但是在事件被触发之前不会执行该函数。

var loadVueComponents=function()
{
    var myComponents=new Vue({....});
};
Mediator.subscribe("page:load",loadVueComponents);

在我不使用Webpack或任何其他工具之前，这是一个旧应用程序，包含大量JavaScripts（有些不能缩小甚至连接/捆绑其他文件）我们需要添加一些新组件（现在使用Vue）并尝试尽可能少地破坏现有页面（中介模式已经实现并根据页面属性加载动态库）

Answer 4

我认为您正在谈论的不是节点模块一部分的某些外部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

这将使您的外部文件在全局范围内可用，然后您可以在任何地方使用它。

注意：在这种情况下，您不需要使用库的节点模块，或者不想放置为加载模块

注入Vue.js

4 个答案: