Vue踩坑记录(二)——vue脚手架webpack配置一个小问题
在开发中,我们经常都是直接使用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是支持模板引擎的。以后碰到了应该避免这类问题。
如果对您有帮助,请点个赞。谢谢!
相关推荐
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13