如何解决在nuxt的正文结尾之前添加客户端JavaScript资产 plugins / vue-gallery.js nuxt.config.js

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

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

由于blueimp在呈现页面期间并不重要，而仅在交互过程中（单击图像以打开灯箱），因此应在</body>结束之前加载javascript。

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

JS

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

问题1： 如果您能帮助我将其重写为客户端功能（也许可以使用另一个类似created（）或Mounted（）的钩子），我将非常高兴。？）

<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加载它甚至可以从资产文件夹中获取它，并将其嵌入到页面中，这很好，但是它已嵌入到所有页面中。

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

在这里找到了另一种可能是最好的方法：loading a css file from 'assets' directory in a NUXT layout

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

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

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

解决方法

您已经猜到了，如果在SSR期间加载了脚本，它将无法找到DOM，并且将失败。有几种方法，但是每种方法各有优缺点。

在`mounted()`中动态加载脚本

这是用户在Nuxt issue board上发布的用于动态加载jQuery的示例。重点是检查process.server的值。我还建议您查看您的用户是否很可能在头部Can I Use... Defer中支持defer链接属性，该属性通常可以代替将脚本放入正文并保持非阻塞状态。

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的新插件。

plugins / 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将样式保留在组件或页面中。

在nuxt的正文结尾之前添加客户端JavaScript资产 plugins / vue-gallery.js nuxt.config.js