在vue.config.js中使用chainWebpack修改配置title没有生效

[iRuxu]

Version

4.0.0

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.831.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.1.1
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.1.1 (4.1.2)
    @vue/cli-plugin-babel: ^4.0.0 => 4.1.1
    @vue/cli-plugin-eslint: ^4.0.0 => 4.1.1
    @vue/cli-plugin-router: ^4.0.0 => 4.1.1 (4.1.2)
    @vue/cli-plugin-vuex: ^4.0.0 => 4.1.1 (4.1.2)
    @vue/cli-service: ^4.1.2 => 4.1.2
    @vue/cli-shared-utils:  4.1.1 (4.1.2)
    @vue/component-compiler-utils:  3.1.0 (3.1.1)
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.7.2 (15.8.3)
    vue-router: ^3.1.3 => 3.1.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10 (2.6.11)
    vue-template-es2015-compiler:  1.9.1
    vuedraggable: ^2.23.2 => 2.23.2
    vuex: ^3.1.2 => 3.1.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

在vue.config.js中使用chainWebpack修改配置:

const Setting = require("./public/setting.json");

module.exports = {
    productionSourceMap: false,
    outputDir: "docs",
    chainWebpack: config => {
        config.plugin("html").tap(args => {
            args[0].title = Setting.meta.title
            args[0].meta = {
                'keywords': Setting.meta.keywords,
                'description': Setting.meta.description
            }
            return args
        });
    }
};

通过vue inspect > output.js 查看生成的最终配置，确定是没有问题的。存在如下代码：

new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        template: 'F:\\iRuxu\\api-book\\public\\index.html',
        title: 'iRuxu Notebook',
        meta: {
          keywords: 'css,javascript,html,bom,dom,html5,jquery,vue,node,git,linux,python,database',
          description: 'iRuxu\'s personal Front-End Notebook'
        }
      }
    ),

但是，实际的build目录和本地访问时，都是没有生效的

What is expected?

期望生效

What is actually happening?

没有生效

地址：https://github.com/iRuxu/api-book

[haoqunjiang]

查了下 html-webpack-plugin 的 issue，发现它 title 选项的用法跟其他选项有些不一样，要在模板也做对应修改才能生效…… jantimon/html-webpack-plugin#1302

我也改一下 Vue CLI 的默认模板吧免得以后其他人被误导。