Vue-Cli: 'title' htmlWebpackPlugin 选项不起作用

Question

我正在使用 vue-cli (3.4.1)，我只是想简单地更改文档的标题。

我将以下内容添加到 vue.config.js

    chainWebpack: (config) => {
        config
          .plugin('html')
          .tap((args) => {
            args[0].title = 'Custom Title';
            return args;
          });
      },

并使用 vue inspect --plugin html 检查 webpack 配置，得到以下输出

    /* config.plugin('html') */
    new HtmlWebpackPlugin(
      {
        templateParameters: function () { /* omitted long function */ },
        template: '<path>\node_modules\@vue\cli-service\lib\config\index-default.html',
        title: 'Custom Title'
      }
    )

Webapp 的标题仍然是“Vue App”。

知道为什么吗？

PS：我不想在我的应用中的某处设置 document.title = 'Custom Title'。我希望在构建时更改文档 <head> 元素中 <title> 标签之间的标题。

Answer 1

我按照@tony19 的建议提交了错误报告。

tldnr：在 public/index.html 编辑模板中的标题，将在构建时使用。

长版本：我的项目中不再有public/index.html，显然我前段时间删除了它，因此从未使用过模板功能。 cli 仍然使用位于某处的模板，因此 htmlWebpackPlugin 的所有更改都没有任何作用。

因此，要么禁用索引。html-template 并修改 htmlWebpackPlugin，要么编辑模板进行更改。

Answer 2

要设置 vue-cli 应用程序的标题，您可以在 HtmlWebpackPlugin 中设置标题（就像您所做的那样）

/* vue.config.js */
chainWebpack: (config) => {
    config
      .plugin('html')
      .tap((args) => {
        args[0].title = 'Custom Title';
        return args;
      });
  },

然后您必须编辑 public/index.html 的 <title> 以使用 lodash 语法引用标题。

<!-- public/index.html -->
<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

查看 Html Webpack 插件的 documentation 编写您自己的模板！

希望对您有所帮助！

Answer 3

您可以通过在 vue-cli 应用的根目录中的 package.json 中设置 "name" 属性来设置 HtmlWebpackPlugin 使用的标题。不需要 chainWebpack 只是为了改变标题。

Answer 4

不幸的是，以上答案对我没有帮助。如前所述 in the offical documentation 您只需将 vue.config.js 添加到您的根文件夹并添加以下内容：

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config
        .plugin('html')
        .tap(args => {
          args[0].title = 'Your new title'
          return args
        })
      }
    }

请记住，您必须停止应用程序并从 npm run serve 重新开始。这对我有用。

Answer 5

根据 configuration reference of the Vue CLI，您可以通过覆盖 vue.config.js 中的页面部分来设置标题。由于除条目外所有配置选项都是可选的，因此应该这样做：

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js',
      title: 'Custom Title'
    }
  }
}

Answer 6

我无法更改 webpack-config 的标题，我假设 vue-cli 稍后会覆盖配置中的标题。对我有用的是在 .env 中设置 VUE_APP_TITLE=<custom title> 并在 index.html 中使用 <title><%= process.env.VUE_APP_TITLE %></title>。 Source

Vue-Cli: 'title' htmlWebpackPlugin 选项不起作用

Vue-Cli: 'title' option for htmlWebpackPlugin does not work

webpack

vue.js

vue-cli-3