Kri*_*ssy 30 webpack vue.js vue-cli-3
我正在使用 vue-cli (3.4.1) 并且我试图简单地更改文档的标题。
我在 vue.config.js 中添加了以下内容
chainWebpack: (config) => {
config
.plugin('html')
.tap((args) => {
args[0].title = 'Custom Title';
return args;
});
},
并检查了 webpack 配置，vue inspect --plugin html结果如下
/* 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>-tags之间的标题<head>。
小智 53
不幸的是，上述答案对我没有帮助。如官方文档中所述，您只需要将 加入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。这对我有用。
Bar*_*all 31
根据Vue CLI的配置参考，您可以通过覆盖vue.config.js. 由于除了 entry 之外的所有配置选项都是可选的，因此应该这样做：
module.exports = {
pages: {
index: {
entry: 'src/index/main.js',
title: 'Custom Title'
}
}
}
小智 15
要设置 vue-cli 应用程序的标题，您可以在 HtmlWebpackPlugin 中设置标题（就像您拥有的那样）
/* vue.config.js */
chainWebpack: (config) => {
config
.plugin('html')
.tap((args) => {
args[0].title = 'Custom Title';
return args;
});
},
那么您必须使用 lodash 语法编辑<title>ofpublic/index.html以引用标题。
<!-- public/index.html -->
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
查看有关编写自己的模板的Html Webpack 插件文档！
希望这可以帮助！
我按照 @tony19 的建议提交了一份错误报告。
public/index.htmltldnr：编辑模板中将在构建时使用的标题。
长版本：我的项目中不再有public/index.html，显然我前段时间删除了它，因此从未使用过模板功能。cli 仍然使用位于某处的模板，因此 htmlWebpackPlugin 的所有更改都不起作用。
因此，要么禁用 index.html-template 并修改 htmlWebpackPlugin，要么编辑模板来进行更改。
| 归档时间： |
|
| 查看次数： |
19879 次 |
| 最近记录： |