Vue-Cli: 'title' option for htmlWebpackPlugin does not work
I'm using vue-cli (3.4.1) and I'm trying to simply change the title of the document.
I added the following to the vue.config.js
chainWebpack: (config) => {
config
.plugin('html')
.tap((args) => {
args[0].title = 'Custom Title';
return args;
});
},
and inspected the webpack config with vue inspect --plugin html resulting in the following output
/* 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'
}
)
The title of the Webapp still says "Vue App".
Any ideas why?
PS: I do not want to set document.title = 'Custom Title' somewhere in my app. I want the title between the <title>-tags in the <head> element of the document to be altered at build time.
Answer
Unfortunately the above answers didn't help me.
As stated in the offical documentation you only need to add the vue.config.js to your root folder and add the following:
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Your new title'
return args
})
}
}
Keep in mind that you have to stop the App and start again with npm run serve. This worked for me.