时间戳

首页 > 解决方案 > 在 nuxt 正文结束之前添加客户端 javascript 资产

nuxt.js - 在 nuxt 正文结束之前添加客户端 javascript 资产

问题描述

我的 nuxt 站点中有一个以通用模式运行的图片库（部署为静态页面），并且想向其中添加blueimp 库（一个灯箱）。

有几种方法可以放置 Javascript ( ./static,./plugins或./assets)。我更喜欢使用 assets 文件夹，因为我放在那里的所有内容都由 webpack 处理（压缩，用于长期客户端缓存的唯一 ID）。

由于 blueimp 在渲染页面期间并不重要，但仅在交互期间（单击图像打开灯箱），javascript 应该在结束之前加载</body>

另一件事是，我只需要在专用页面上使用 blueimp，因此如果可能的话，不应在其他页面上提供 blueimp-gallery.min.js 和它的 css。

JS

我通过将静态文件夹中的脚本包含在 head 中并添加到其中（不使用 head ;)），让它在yarn dev模式下运行（支持 SSR ）。body: true在生产中（作为静态页面），它不起作用。该参数ssr: false似乎没有效果。在模板中添加<client-side>图像组件也无济于事。

问题 1：如果您能帮我将其重写为客户端函数，我会很高兴（也许使用另一个钩子，如 created() 或 mount() ？）

<script>
export default {
  head: {
    script: [
      {
        src: 'js/blueimp-gallery/blueimp-gallery.min.js',
        body: true,
        ssr: false,
      },
    ],
  },
},
</script>

CSS

我可以使用下面的代码从静态文件夹加载一个 css 文件。不幸的是，这增加了一个额外的请求。

<template>
...
</template>

<script>
export default {
  head: {
    style: [{ src: "blueimp-gallery/css/blueimp-gallery.min.css", head: true }],
  },
}
</script>

使用 @import 加载它甚至会从 assets 文件夹中获取它并将其嵌入到页面中，这很好，但它被嵌入到所有页面中。

<style>
@import '~/assets/styles/blueimp-gallery/css/blueimp-gallery.min.css';
</style>

在这里找到了另一种方式，这可能是最好的：从 NUXT 布局中的“资产”目录加载 css 文件

link: [{ rel: 'stylesheet', href: require('~/assets/blueimp-gallery/css/blueimp-gallery.min.css')}],

问题 2： 也许您有一个改进的解决方案将 CSS 嵌入到单个页面中？

我是初学者，所以如果您有解决方案，请添加一些带有一点上下文的示例。

标签： nuxt.jsnuxtjs

解决方案

正如你已经猜到的，在 SSR 期间，如果脚本被加载，它将无法找到 DOM 并且会失败。有几种方法，但每种方法都有其优点和缺点。

动态加载脚本mounted()

这是用户在Nuxt 问题板上发布的用于动态加载 jQuery 的示例。关键是检查process.server价值。我还建议您查看您的用户是否可能支持head Can I Use... Deferdefer中的链接属性，这通常可以替代将脚本放入正文并保持非阻塞。

export default {
  mounted() {
    if (!process.server && !window.jQuery) {
      const script = document.createElement("script");
      script.onload = this.onScriptLoaded;
      script.type = "text/javascript";
      script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js";
      document.head.appendChild(script);
    } else {
      this.onScriptLoaded();
    }
  },
  methods: {
    onScriptLoaded(event = null) {
      if (event) {
        console.log("Was added");
      } else {
        console.log("Already existed");
      }
      console.log(window.jQuery);
      window.jQuery("h1").append(` <span>(CDN script has loaded)</span>`);
    }
  }
}

检查现有解决方案

快速的 Google 搜索显示了几个非常流行的 Vue 组件，您可以安装它们使用 blueimp gallery 作为依赖项：vue-gallery和Vue Blueimp Gallery。您可能不喜欢这些组件，但乍一看它们的源代码非常简单。在处理 NuxtJS 的 Vue 插件时，当您找不到它们支持 SSR（而这些简单的包装器组件通常不支持）时，您通常需要做的就是创建一个禁用 SSR 的新插件。

插件/vue-gallery.js

import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('VGallery', VueGallery)

nuxt.config.js

plugins: [{ src: '~/plugins/vue-gallery.js', ssr: false }]

CSS

您可以使用 NuxtJS 以几种不同的方式轻松导入 CSS。

<script>
  import 'blueimp-gallery/css/blueimp-gallery.min.css';

  export default {
    data () { ... }
  }
</script>

<style scoped>
@import 'blueimp-gallery/css/blueimp-gallery.min.css';
</style>

您也可以将缩小版本包含在您的资产文件夹或您喜欢的任何地方，但这是不必要的，因为 NuxtJS 的生产模式将处理资产缩小。请注意，第二个与您的不同之处在于scoped属性。如果没有此标记，则其中的任何样式都是站点范围的，您应该scoped尽可能在组件或页面中保留样式。

推荐阅读