入口 index.html

electron-vue 在构建产品时通过使用 html-webpack-plugin 来创建 index.html. 在开发过程中, 你会发现 src/ 目录下的 index.ejs, 而这个就是你用来改变你最终生成的 HTML 文件的模板.

如果你不了解这个插件是怎么工作的, 那么推荐你看一下 html-webpack-plugin. 但是如果你不关心, 那么简单来说, 这个插件会自动包含 renderer.js/styles.css 等资源到并 注入/压缩 到 index.html 中.

开发使用的 index.ejs

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title><%= htmlWebpackPlugin.options.title %></title>
  6.     <%= ... %>
  7.   </head>
  8.   <body>
  9.     <div id="app"></div>
  10.     <!-- webpack builds are automatically injected -->
  11.   </body>
  12. </html>

产品中使用的index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>app</title>
  6.     <link href="styles.css" rel="stylesheet">
  7.   </head>
  8.   <body>
  9.     <div id="app"></div>
  10.     <script type="text/javascript" src="renderer.js"></script>
  11.   </body>
  12. </html>

关于使用 CDNs

尽管使用 CDN 可以减少你最终生成 app 的大小, 但是仍然不推荐使用. 主要原因就是如果使用 CDN, 则我们需要保证 app 应用需要一直保持到 Internet 的连接, 而这个却并不是 Electron apps 所具备的. 如果你使用了像 bootstrap 这样的 CSS框架, 这就是一个导致你的 app 样式看起来一团糟的相当重要的原因.

“我不管, 我就是要用 CDN”

如果你依然打算使用 CDN, 那么你可以在 src/index.ejs 中添加相应 tags . 不过你需要确保设置合适的 UI/UX 来应对 app 离线的情形.