注入<head>在 Vue.js 中

Question

I have a few EXTERNAL scripts that need to be loaded on various pages, such as Google Places Autocomplete, Facebook APIs, etc.我有一些 EXTERNAL 脚本需要加载到各种页面上，例如 Google Places Autocomplete、Facebook API 等。

Obviously it does not make sense to load them on every route, however the documentation does not address this rather common scenario.显然，在每条路线上都加载它们没有意义，但是文档没有解决这种相当常见的情况。

Furthermore, the Vue instance mounts onto a tag within the body, since此外，Vue 实例安装在主体内的标签上，因为

the mounted element will be replaced with Vue-generated DOM in all cases.在所有情况下，挂载的元素都将被 Vue 生成的 DOM 替换。 It is therefore not recommended to mount the root instance to < html > or < body >.因此不建议将根实例挂载到 <html> 或 <body>。

How are real world applications currently dealing with this situation?现实世界的应用程序目前如何处理这种情况？

Answer 1

I recommend using https://www.npmjs.com/package/vue-head , it is exactly designed to inject the data you want from your component into the document's head.我建议使用https://www.npmjs.com/package/vue-head ，它的设计目的是将您想要的组件中的数据注入到文档的头部。 Perfect for SEO title and meta tags.非常适合 SEO 标题和元标签。

To be used like so:像这样使用：

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' }
    ]
  }
}

Answer 2

This isn't addressed in documentation because it's not Vue's job.这在文档中没有解决，因为这不是 Vue 的工作。 Vue is meant for creating, among other things, single page applications (SPA). Vue 旨在创建单页应用程序（SPA）等。 In a single page application you typically load all your vendor scripts (Google, Facebook, etc.) and your own scripts and styles the first time the site loads.在单页应用程序中，您通常会在第一次加载站点时加载所有供应商脚本（Google、Facebook 等）以及您自己的脚本和样式。

A lot of real world applications just bundle all their vendor scripts into a single file (example: vendor.js) using Webpack, Gulp, Grunt or some other bundling tool.许多现实世界的应用程序只是使用 Webpack、Gulp、Grunt 或其他一些捆绑工具将所有供应商脚本捆绑到一个文件中（例如：vendor.js）。 The rationale is that you can pack all those scripts into a single file, minify them, serve them with gzip compression and then it's only a single request.基本原理是您可以将所有这些脚本打包到一个文件中，缩小它们，使用 gzip 压缩为它们提供服务，然后它只是一个请求。

Smarter bundlers like Webpack and Browserify can walk the dependency tree if you're using require() or import to import your modules.如果你使用require()或import来导入你的模块，像 Webpack 和 Browserify 这样更智能的打包器可以遍历依赖树。 This can be allow you to split your dependencies into several logical chunks so components and libraries only load load with their dependencies if they themselves are loaded.这可以允许您将依赖项拆分为几个逻辑块，以便组件和库仅在加载它们本身时加载它们的依赖项。

Answer 3

We had this issue as well.我们也有这个问题。 We load JavaScripts by other means.我们通过其他方式加载 JavaScript。 We created a library that does this for us (quick and dirty, observing browser events and adding the JavaScript tag).我们创建了一个为我们做这件事的库（快速而肮脏，观察浏览器事件并添加 JavaScript 标记）。 This library also, implements a mediator pattern ( https://addyosmani.com/largescalejavascript/#mediatorpattern ) fires an event of "page:load" (custom for us) at the very end once all libraries have been loaded.该库还实现了一个中介模式（ https://addyosmani.com/largescalejavascript/#mediatorpattern ），一旦所有库都加载完毕，就会在最后触发一个“page:load”（为我们自定义）事件。 Our VueJS components are executed only when that event fires.我们的 VueJS 组件仅在该事件触发时执行。 This also allowed us to put Vue components in the header tag instead of body, as the browser will load it, but not execute the function until the event is fired.这也允许我们将 Vue 组件放在 header 标签而不是 body 中，因为浏览器会加载它，但在事件被触发之前不会执行该函数。

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

Before I get downvotes for not using Webpack or any of those other tools, this was an old application with a lot of JavaScripts (some cannot be minified or even concatenated/bundle with other files) and we needed to add some new components (now using Vue) and trying to disrupt as little as possible existing pages (mediator pattern was already implemented and loading dynamic libraries based on page attributes)在我因不使用 Webpack 或任何其他工具而被否决之前，这是一个带有大量 JavaScript 的旧应用程序（有些无法缩小甚至无法与其他文件连接/捆绑），我们需要添加一些新组件（现在使用Vue) 并尝试尽可能少地破坏现有页面（中介模式已经实现并根据页面属性加载动态库）

Answer 4

I think you are talking about some external JS which are not part of node-modules and want to retrieve from external source ( http://your-external-script ) then you can go for dynamic loading of JS script tag.我认为您正在谈论一些不属于节点模块的外部 JS，并且想要从外部源（ http://your-external-script ）检索，然后您可以动态加载 JS 脚本标签。 Put this code somewhere like you first landing screen of SPA in before transition event.将此代码放在像您在转换事件之前的第一个 SPA 登陆屏幕一样的地方。

var script = document.createElement('script');
script.src = "htpps://your-external-script.js";
document.head.appendChild(script); //or something of the likes

This will make your external file available in global scope and then you can use it anywhere.这将使您的外部文件在全局范围内可用，然后您可以在任何地方使用它。

Note : this scenario is where you dont haev node-moduels for library or you dont want to put as load modules注意：在这种情况下，您不需要为库添加节点模块，或者您不想将其作为加载模块

注入<head>在 Vue.js 中

问题描述

4 个解决方案

解决方案1
9 2018-07-21 08:31:43

解决方案2
7 已采纳 2017-01-18 03:35:31

解决方案3
1 2017-01-18 16:30:03

解决方案4
0 2019-10-09 08:27:59

注入<head>在 Vue.js 中

问题描述

4 个解决方案

解决方案1 9 2018-07-21 08:31:43

解决方案2 7 已采纳 2017-01-18 03:35:31

解决方案3 1 2017-01-18 16:30:03

解决方案4 0 2019-10-09 08:27:59

解决方案1
9 2018-07-21 08:31:43

解决方案2
7 已采纳 2017-01-18 03:35:31

解决方案3
1 2017-01-18 16:30:03

解决方案4
0 2019-10-09 08:27:59