# 入口 `index.html`
在產品階段，electron-vue 使用 [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin) 創建 `index.html`。在開發過程中，你將在 `src/` 目錄中找到一個 `index.ejs`。在這里，你可以更改 HTML 入口文件。
如果你不熟悉這個插件的工作原理，那么我鼓勵你看看它的 [文檔](https://www.npmjs.com/package/html-webpack-plugin)。簡而言之，這個插件會自動將產品階段的資源（包括 `renderer.js` 和 `styles.css`）注入到最終壓縮版的 `index.html` 中。
### 開發階段的 `index.ejs`
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<%= ... %>
</head>
<body>
<div id="app"></div>
<!-- webpack 的構建會被自動注入 -->
</body>
</html>
```
### 產品階段的 `index.html` \(非壓縮版\)
```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>
```
### 關于 CDNs 的使用
雖然使用 CDN 提供的資源有益于你的應用程序的最終版本的大小，但我建議不要使用它們。主要原因是，通過這樣做，你其實是在假設你的應用程序始終可以訪問互聯網，而 Electron 應用程序并不總是如此。這成為使用 CSS 框架（如 bootstrap）的一個相當重要的問題，因為沒有互聯網，你的應用程序將迅速變得沒有任何樣式并且亂七八糟。
> “我不在乎，我還是想用CDN。”
如果你堅持使用 CDN，那么你仍可以通過將標簽添加到 `src/index.ejs` 文件中達到目的。只是當你的應用程序處于離線模式時，請確保設置適當的 UI/UX 流程。
