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

Posted 2023-03-25

【中文标题】在 nuxt 正文结束之前添加客户端 javascript 资产

【英文标题】：Add client side javascript asset before end of body in nuxt

【发布时间】：2020-12-05 17:38:40

【问题描述】：

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

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

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

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

JS

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

问题 1： 如果您能帮我将其重写为客户端函数（可能使用另一个钩子，如 created() 或 mount() ?)

<script>
export default 
  head: 
    script: [
      
        src: 'js/blueimp-gallery/blueimp-gallery.min.js',
        body: true,
        s-s-r: 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 嵌入到单个页面中？

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

【参考方案1】：

正如你所猜测的，在 s-s-r 期间，如果脚本被加载，它将无法找到 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 库作为依赖项：vue-gallery 和 Vue Blueimp Gallery。您可能不喜欢这些组件，但乍一看它们的源代码非常简单。在处理 NuxtJS 的 Vue 插件时，当您找不到它们支持 s-s-r（而简单的包装器组件，例如这些通常不支持）时，您通常需要做的就是创建一个禁用 s-s-r 的新插件。

插件/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', s-s-r: 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 将样式保留在您的组件或页面中。

【讨论】：

嗨 Duckie，感谢您抽出宝贵时间发布此详细答案。到目前为止，尝试了 mount() 函数但没有成功。它触发了控制台输出，所以我猜我包含我的 js 的方式还有其他问题。也许我稍后会尝试 vue-gallery 插件。我会及时通知你:)