vue在build之后生成的index.html多次重复载入样式表和js文件的问题

创建一个基于 webpack 模板的新项目（2019.03.14 测试）

---

1、进入文件目录，然后调起命令行工具，输入：

#wwwroot 为自定义项目名
$ vue init webpack wwwroot

2、运行命令后，会让用户输入几个基本选项：

? Project name wwwroot   // 项目名称
? Project description a vue.js project   // 项目描述
? Author yourname    // 作者
? Vue build standalone    // 
? Install vue-router ? Yes    // 是否安装路由
? Use ESLint to lint you code ? Yes    // 使用ESLint 到你的代码
? Pick an ESLint preset Standard    // 选择一个预置ESLint
? Setup unit tests width karma + Mocha ? Yes    // 设置单元测试Karma + Mocha
? Setup e2e tests with Nightwatch ? Yes    // 设置端到端测试，Nightwatch

3、运行项目

$ cnpm run dev

4、编译项目

$ cnpm run build

在多次编译后会发现，index.html 文件内存在了多组重复引入样式和JS。

<script type="text/javascript" src="/static/js/manifest.2ae2e69a05c33dfc65f8.js"></script>
<script type="text/javascript" src="/static/js/vendor.4e6936140256982905ea.js"></script>
<script type="text/javascript" src="/static/js/app.6cac6299ff42cd3f1d19.js"></script>
<script type="text/javascript" src="/static/js/manifest.2ae2e69a05c33dfc65f8.js"></script>
<script type="text/javascript" src="/static/js/vendor.4e6936140256982905ea.js"></script>
<script type="text/javascript" src="/static/js/app.6cac6299ff42cd3f1d19.js"></script>

查找编译设置文件

/build/webpack.prod.conf.js

new HtmlWebpackPlugin({
    filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
    removeComments: true,
    collapseWhitespace: false,
    removeAttributeQuotes: false
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
}),

编译文件后我们会把 /dist/ 下的文件复制到根目录下，同时每次编译都会使用之前编译的生成的index.html，这样循环往复，就会生成多组重复引入的样式和JS。

template: 'index.html',     // 模板文件
inject: true,    // 注入资源引用
minify: {}    // 压缩
removeComments: [true/false]    // 删除注释
removeAttrbuteQuotes: [true/false]    // 删除属性引号
collapseWhitespace: [true/false]    // 折叠空白

基于这个原因，我们可以设置 template: 'template/index.html'，即可解决这个问题。