问题:Vue-cli3中是如何动态将script放到index.html文件中的?
在vue-cli初始化的目录下,有个index.html文件,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>vue-travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
运行vue项目后,查看源码,发现这个index.html最后出现多出了 <script type="text/javascript" src="/aahdfpp.js"></script>
,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>vue-travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/aahdfpp.js"></script></body>
</html>
应用程序启动后,在浏览器中对index.html进行查看源代码,就能看到被动态插入了script标签【原本的index.html是没有script的】这应该是webpack起的作用,但他是如何实现的呢?菜鸟一枚,谢谢回答~
自己对webpack捣鼓了一晚上,明白了这是webpack插件
html-webpack-plugin
起的作用,如下代码便是:上面代码中
filename
和inject
字段就是对index.html进行动态注入script标签!~解决了问题,自给自足了,哈哈。