Vue踩坑记录（二）——vue脚手架webpack配置一个小问题

2024年4月9日 136次阅读 来源: DanielDemi

在开发中，我们经常都是直接使用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是支持模板引擎的。以后碰到了应该避免这类问题。

如果对您有帮助，请点个赞。谢谢！

    原文作者：DanielDemi
    原文地址: https://segmentfault.com/a/1190000016951191
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞