在開發中，我們經常都是直接使用vue-cli腳手架來建立工程
然後都是直接打包。
但是有些場景我們需要修改html.index模板檔案。有人會問什麼情況下需要？
有些場景是我們在載入vue檔案的時候會等待一段時間的，比如做了許可權控制，先要獲取許可權，然後判斷該頁面是否有許可權才進入該頁面
這些都是說明我們會有一個頁面等待的時間，如果這個時候頁面是空白的，那麼明顯是不好的。
這個時候如果我們在index.html模板檔案中再加一些html程式碼，如一個載入圖片：
修改後的index.html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="./static/favicon.ico">
<link rel="icon" href="./static/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="./static/favicon.ico">
<link rel="Bookmark" href="./static/favicon.ico">
<title>dolphin_template</title>
</head>
<body style="background: #f2f2f2;" class="dolphin">
<div id="app">
<img src="./static/loading.gif">
</div>
</body>
</html>這個時候如果打包的話，打包結果img路徑是不會變的，可以發現它是沒有走babel-loader的
...
<img src="./static/loading.gif">
...所以這個時候，img跟url是很掛鉤的，這個時候有些url是找不到圖片的。
這個時候我們需要修改一下，其實index.html是支援模板引擎的，
修改如下：
...
// 修改後
src="<%=require(`./static/loading.gif`)%>"
...打包後:會被轉義為base64,這樣就跟路徑沒有關係了，
...
<img src="data:image/gif;base64,R0lGOD。。。此處省略，太長">
...記一下，index.html是支援模板引擎的。以後碰到了應該避免這類問題。
如果對您有幫助，請點個贊。謝謝！