Vue-cli3中是如何动态将script放到index.html文件中的?

问题: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起的作用,但他是如何实现的呢?菜鸟一枚,谢谢回答~

阅读 9.7k
1 个回答

自己对webpack捣鼓了一晚上,明白了这是webpack插件html-webpack-plugin起的作用,如下代码便是:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
})

上面代码中filenameinject字段就是对index.html进行动态注入script标签!~
解决了问题,自给自足了,哈哈。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题