Vueプロジェクトでスケルトンスクリーンを使用する方法

<テンプレート>
  <div class="skeleton-home">
    <div>読み込み中...</div>
  </div>
</テンプレート>
 
<スタイル>
.スケルトンホーム{
  幅：100vw;
  高さ：100vh;
  背景色: #eaeaea;
}
</スタイル>

<テンプレート>
  <div id="アプリ">
    <!-- ルート コンポーネント -->
    <home style="display:none" id="homeスケルトン"></home>
  </div>
</テンプレート>
<スクリプト>
'./home.skeleton.vue' から home をインポートします。
エクスポートデフォルト{
  コンポーネント:
    家
  }
}
</スクリプト>
<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
}
*{
  パディング: 0;
  マージン: 0;
}
</スタイル>

//エントリファイルimport Vue from 'vue'
'./App.vue' からアプリをインポートします。
スケルトンを新しいVue({
  レンダリング(h) {
    h(App)を返す
  }
})
デフォルトのスケルトンをエクスポート

'厳密な使用';
 
/* */
 
var isJS = function (file) { return /\.js(\?[^.]+)?$/.test(file); };
 
var ref = require('chalk');
var red = ref.red;
var yellow = ref.yellow;
 
var prefix = "[vue-server-renderer-webpack-plugin]";
var warn = exports.warn = function (msg) { return console.error(red((prefix + " " + msg + "\n"))); };
var tip = exports.tip = function (msg) { return console.log(yellow((prefix + " " + msg + "\n"))); };
 
var 検証 = 関数 (コンパイラ) {
  コンパイラオプションのターゲットが 'ノード' の場合
    warn('webpack config `target` は "node" である必要があります。');
  }
 
  コンパイラオプションの出力とコンパイラオプションの出力ライブラリターゲットが 'commonjs2' の場合、
    warn('webpack config `output.libraryTarget` は "commonjs2" である必要があります。');
  }
 
  コンパイラオプションの外部がある場合
    ヒント（
      'サーバービルドの依存関係を外部化することをお勧めします' +
      「ビルドパフォーマンスが向上します。」
    );
  }
};
 
var VueSSRServerPlugin = 関数 VueSSRServerPlugin (オプション) {
  オプションがvoid 0の場合、オプションは{}になります。
 
  this.options = Object.assign({
    ファイル名: 'vue-ssr-server-bundle.json'
  }, オプション);
};
 
VueSSRServerPlugin.prototype.apply = 関数 apply (コンパイラ) {
    var this$1 = this;
 
  検証(コンパイラ);
 
  コンパイラ.プラグイン('emit', 関数(コンパイル, cb) {
    var stats = compilation.getStats().toJson();
    var entryName = Object.keys(stats.entrypoints)[0];
    var entryAssets = stats.entrypoints[entryName].assets.filter(isJS);
 
    エントリアセットの長さが1より大きい場合
      新しいエラーをスローします(
        「サーバー側バンドルには 1 つのエントリ ファイルが必要です。」 +
        「サーバー設定で CommonsChunkPlugin を使用しないでください。」
      ）
    }
 
    var エントリ = entryAssets[0];
    if (!entry || typeof entry !== 'string') {
      新しいエラーをスローします(
        ("エントリ \"" + entryName + "\" が見つかりません。正しいエントリ オプションを指定しましたか?")
      ）
    }
 
    varバンドル = {
      エントリ: エントリ、
      ファイル: {},
      マップ: {}
    };
 
    stats.assets.forEach(関数(アセット) {
      アセット名が一致する場合(/\.js$/) {
        bundle.files[asset.name] = compilation.assets[asset.name].source();
      } そうでない場合 (asset.name.match(/\.js\.map$/)) {
        bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source());
      }
      // サーバーには何も出力しない
      compilation.assets[asset.name]を削除します。
    });
 
    var json = JSON.stringify(bundle, null, 2);
    var ファイル名 = this$1.options.filename;
 
    compilation.assets[ファイル名] = {
      ソース: function () { return json; },
      サイズ: function () { return json.length; }
    };
 
    関数 :
  });
};
 
モジュールをエクスポートします。

「厳密な使用」
 
定数パス = require('path')
定数 nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('../skeleton/plugin/server-plugin')
 
モジュール.エクスポート = {
  // これにより、webpack は Node に適した方法で動的インポートを処理できるようになります。
  // また、Vueコンポーネントをコンパイルするときにも、
  // `vue-loader` にサーバー指向のコードを配信するように指示します。
  ターゲット: 'ノード',
 
  // バンドル レンダラーのソース マップ サポートを提供する devtool: 'source-map',
 
  // エントリをアプリケーションのサーバーエントリファイルエントリにポイントします: path.resolve(__dirname, '../skeleton/skeleton-entry.js'),
 
  出力: {
    path: path.resolve(__dirname, '../skeleton'), // 生成されたファイルのディレクトリ publicPath: '/skeleton/',
    ファイル名: '[name].js',
    libraryTarget: 'commonjs2' // これはサーバーバンドルにNodeスタイルのエクスポートを使用するように指示します
  },
 
  モジュール: {
    ルール:
      {
        テスト: /\.vue$/,
        ローダー: 'vue-loader',
        オプション:
          コンパイラオプション: {
            空白を保持:false
          }
        }
      },
      {
        テスト: /\.css$/,
        使用: ['vue-style-loader', 'css-loader']
      }
    ]
  },
 
  パフォーマンス：
    ヒント: 偽
  },
 
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // アプリケーション依存モジュールを外部化します。サーバー構築を高速化できる
  // より小さいバンドル ファイルを生成します。
  外部: nodeExternals({
    // webpack が処理する必要がある依存関係を外部化しないでください。
    // ここでさらにファイルタイプを追加できます。たとえば、*.vue rawファイルは処理されません。
    // `global` を変更する依存モジュール (ポリフィルなど) もホワイトリストに追加する必要があります。ホワイトリスト: /\.css$/
  }）、
 
  // これは、サーバーの出力全体を 1 つの JSON ファイルに構築するプラグインです。
  // ファイル名が設定されていない場合、デフォルトのファイル名は `vue-ssr-server-bundle.json` になります
  プラグイン: [
    新しいVueSSRServerPlugin({
      ファイル名: 'skeleton.json'
    })
  ]
}

  「スクリプト」: {
    "create-skeleton": "webpack --progress --config build/webpack.skeleton.conf.js",
    "fill-skeleton": "ノード ./skeleton/skeleton.js"
  }

npm 実行 create-skeleton

// 生成された skeleton.json の内容をテンプレート ファイルに入力します const fs = require('fs')
const { 解決 } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
// skeleton.json を読み取り、skeleton/index.html をテンプレートとして使用してコンテンツを書き込みます const renderer = createBundleRenderer(resolve(__dirname, '../skeleton/skeleton.json'), {
  テンプレート: fs.readFileSync(resolve(__dirname, '../skeleton/index.html'), 'utf-8')
})
// 前のテンプレートの内容をルートディレクトリのテンプレートファイル 'index.html' に書き込みます
レンダラー.renderToString({}, (err, html) => {
  もし（エラー）{
    console.log(err) を返します
  }
  console.log('レンダリングが完了しました!')
  fs.writeFileSync('index.html', html, 'utf-8')
})

"fill-skeleton": "ノード ./skeleton/skeleton.js"