index.html

electron-vue は本番ビルドで index.html を作成するために html-webpack-plugin を使用します。開発中は src/ ディレクトリのindex.ejs となります。ここではエントリーとなる HTML ファイルを変更することができます。

このプラグインがどのように動作するかわからない場合は、そのドキュメントを見ることを勧めます。しかし要するに、このプラグインは自動的に renderer.js と styles.css を含む本番アセットを最終的にファイルサイズを小さくし、 index.html に挿入します。

開発中の index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <%= ... %>
  </head>
  <body>
    <div id="app"></div>
    <!-- webpack ビルドが自動的に注入されます -->
  </body>
</html>

本番の(ファイルサイズを小さくしていない) index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>app</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="renderer.js"></script>
  </body>
</html>

CDN の利用について

CDN から提供されるアセットを利用することは、アプリケーションの最終的なビルドサイズにとっては素晴らしい利点があるかもしれませんが、それらを使用することは勧めません。主な理由は、そうすることによってアプリケーションが必ずインターネットにアクセスできると仮定することになりますが、Electron アプリケーションの場合は必ずしもそうとは限りません。これは bootstrap のような CSS フレームワークではかなり重大な問題となり、アプリケーションはすぐに整っていない状態になるでしょう。

"私は気にしません、それでも CDN を使いたいです"

それでも CDN を利用すると決めた場合は、 src/index.ejs ファイルにタグを追加することでできます。ただアプリケーションがオフラインの時の UI/UX フローを適切に設定してください。

results matching ""

    No results matching ""