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'。我希望在构建时更改文档<title>元素中<head>标记之间的标题。

Answer 1

不幸的是，以上答案并没有帮助我。如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 2

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

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

Answer 3

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

Answer 4

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

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

长版：我的项目中不再有public/index.html，显然我早前删除了它，因此从未使用过模板功能。 cli仍使用位于某处的模板，因此htmlWebpackPlugin的所有更改均无效。

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

Answer 5

要设置vue-cli应用程序的标题，您可以在HtmlWebpackPlugin中设置标题（与您一样）

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

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

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

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

希望这会有所帮助！

Answer 6

您可以通过在vue-cli应用程序的根目录中package.json中设置“ name”属性来设置HtmlWebpackPlugin使用的标题。无需chainWebpack即可更改标题。

Vue-Cli：htmlWebpackPlugin的“标题”选项不起作用

6 个答案: