Vue-Cli：htmlWebpackPlugin 的“标题”选项不起作用
Posted
技术标签:
【中文标题】Vue-Cli：htmlWebpackPlugin 的“标题”选项不起作用【英文标题】：Vue-Cli: 'title' option for htmlWebpackPlugin does not work 【发布时间】：2019-07-23 20:48:46 【问题描述】：我正在使用 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>-tags 之间的标题。
【问题讨论】：
这可能是一个错误。我推荐reporting it。 【参考方案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 重新开始。这对我有用。
【讨论】：
【参考方案2】：我无法从 webpack-config 更改标题，我假设 vue-cli 稍后会覆盖配置中的标题。对我有用的是在.env 中设置VUE_APP_TITLE=<custom title> 并在index.html 中使用<title><%= process.env.VUE_APP_TITLE %></title>。 Source
【讨论】：
【参考方案3】：根据configuration reference of the Vue CLI，您可以通过覆盖vue.config.js 中的页面部分来设置标题。由于除了 entry 之外所有配置选项都是可选的，所以应该这样做：
module.exports =
pages:
index:
entry: 'src/index/main.js',
title: 'Custom Title'
【讨论】：
这个对我来说很完美！我只需要将entry 路径修改为我的入口文件的设置方式。
这对我来说也很好用。我只需要重新启动我的 docker 容器。
这是达到预期结果的最简单方法【参考方案4】：
您可以通过在 vue-cli 应用程序的根目录中设置 package.json 中的 "name" 属性来设置 HtmlWebpackPlugin 使用的标题。不需要chainWebpack只是为了改变标题。
【讨论】：
这确实有效，但 package.json 名称仅限于lower-case_hypens-and-underscores。【参考方案5】：
要设置 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，了解如何编写自己的模板！
希望这会有所帮助！
【讨论】：
【参考方案6】：我按照@tony19 的建议提交了一份错误报告。
tldnr：在模板中编辑 public/index.html 的标题，将在构建时使用。
长版：我的项目中不再有public/index.html，显然我前段时间删除了它，因此从未使用过模板功能。
cli 仍然使用位于某处的模板，因此对 htmlWebpackPlugin 的所有更改都不起作用。
因此，要么禁用 index.html 模板并修改 htmlWebpackPlugin，要么编辑模板以进行更改。
【讨论】：
以上是关于Vue-Cli：htmlWebpackPlugin 的“标题”选项不起作用的主要内容，如果未能解决你的问题，请参考以下文章
webpack/HtmlWebpackPlugin 错误：无效的配置对象
使用 HTMLWebpackPlugin 时如何通过 webpack 加载图片？
入口点未定义 = index.html 使用 HtmlWebpackPlugin
如何将 Webpack 4 SplitChunksPlugin 与 HtmlWebpackPlugin 一起用于多页应用程序？