1

ユニバーサル モード (静的ページとしてデプロイ) で実行されている nuxt サイトに画像ギャラリーがあり、そこにblueimp ギャラリー(ライトボックス) を追加したいと考えています。

Javascript を配置する方法はいくつかあります ( ./static、./pluginsまたは./assets)。そこに置くものはすべてwebpack（圧縮、長期クライアントキャッシュの一意のID）によって処理されるため、assetsフォルダーを使用することをお勧めします。

blueimp はページのレンダリング中は重要ではなく、インタラクション (画像をクリックしてライトボックスを開く) の間のみ重要であるため、javascript はページの終了直前にロードする必要があります。</body>

もう 1 つのことは、専用ページでのみ blueimp が必要であるため、可能であれば、blueimp-gallery.min.js とその css を他のページで提供しないことです。

JS

static フォルダーのスクリプトを head に含めて ( head を使用しないように ;) )yarn dev追加することにより、モード (SSR をサポートする)で実行しました。body: true本番環境では (静的ページとして)、機能しません。パラメータ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 でロードすると、assets フォルダーからフェッチされてページに埋め込まれますが、これは素晴らしいことですが、すべてのページに埋め込まれています。

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

ここで別の方法を見つけました。これはおそらく最良の方法です: NUXT レイアウトの 'assets' ディレクトリから css ファイルをロードする

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

質問 2: CSS を 1 つのページに埋め込むための改善されたソリューションをお持ちですか?

私は初心者なので、解決策がある場合は、状況を少し説明した例をいくつか追加してください。

4

1 に答える 1

0

ご想像のとおり、SSR 中にスクリプトが読み込まれると、DOM を見つけることができず、失敗します。いくつかのアプローチがありますが、それぞれに長所と短所があります。

でスクリプトを動的にロードするmounted()

これは、jQuery を動的にロードするためにNuxt イシュー ボードにユーザーが投稿した例です。重要なポイントは、値をチェックすることprocess.serverです。deferまた、ユーザーがhead のリンク属性Can I Use... 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 で簡単に検索すると、依存関係として blueimp gallery を使用する、インストール可能ないくつかの非常に人気のある Vue コンポーネントが表示されました: 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 のプロダクション モードがアセットの縮小を処理するため、不要です。あなたのものと比較した2番目のものの違いはscoped属性であることに注意してください。このタグがないと、その中のスタイルはサイト全体にscoped適用されるため、可能な限りコンポーネントまたはページ内にスタイルを保持するために使用する必要があります。

于 2020-08-17T13:11:02.810 に答える