问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在 Vue.js 中注入 <head>

社区维基
1
新手上路，请多包涵

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

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

此外，Vue 实例安装在正文中的标签上，因为

在所有情况下，挂载的元素都将替换为 Vue 生成的 DOM。因此不建议将根实例挂载到 或。

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

原文由 softcode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.js
阅读 985
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

如果您使用 require() 或 import 来导入您的模块，像 Webpack 和 Browserify 这样更智能的打包程序可以遍历依赖关系树。这可以允许您将依赖项拆分为几个逻辑块，以便组件和库仅在加载它们自己的情况下加载它们的依赖项。

原文由 Soviut 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我推荐使用 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' }
    ]
  }
}

原文由 antoni 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题