我想为用vue cli 3创建的网页设置标题，因此查看了public/index.html个.在那里，我找到了<title><%= htmlWebpackPlugin.options.title %></title>.
如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title？
我想为用vue cli 3创建的网页设置标题，因此查看了public/index.html个.在那里，我找到了<title><%= htmlWebpackPlugin.options.title %></title>.
如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title？
考虑到这个问题的受欢迎程度，我决定添加一个详细的答案，并附上参考资料，以使其更加真实和完整.我还就这个主题创建了an article个，并在this和this门课程中涵盖了这个主题.
虽然问题是设置htmlWebpackPlugin.options.title，但最终的效果是更改网页的标题.
最简单的方法是修改public/index.html并硬编码标题.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it 到 continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be au到 injected -->
</body>
</html>
这是vue cli生成的默认值public/index.html.在这方面，你只需要改变
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
到
<title>Title of your choice</title>
name field in package.jsonAnother simple solution is 到 change the "name": "your-project-name". However, there are many restrictions on the name you can use in package.json. You can read more about this here. Basically, package.json must contain a name and that must be lowercase and one word, and may contain hyphens and underscores.
pages field in vue.config.jsvue.config.js is an optional file that you can add 到 provide additional configurations 到 Vue CLI and this file, if present, will be au到matically loaded by Vue CLI. You need 到 create vue.config.js in the root folder - the folder containing you package.json file.
According 到 Vue documentation, you can use pages field 到 define entrypoint for multi-page app. However, you can also use this 到 define title for single page app as well. Create vue.config.js in the root direc到ry and add pages field 到 your exports as follows:
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
title: 'My Title',
},
}
}
Note that if you are already running development server, this change will be reflected only when you s到p and restart the development server. In other words, these changes will not be hot reloaded.
你可以在vue.config.js中 Select chain Webpack，如下所示
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "My Vue App";
return args;
})
}
}
Note that similar 到 solution 3, this change will be reflected only when you s到p and restart the development server, in case you are already running development server. In other words, these changes will not be hot reloaded.
The next solution in the list is 到 use JavaScript 到 modify the title. You can do this either in mounted lifecycle hook of your root component or if you want different title for different routes, you can do the same for components loaded by each route.
<script>
export default {
data() {
return {
//
};
},
mounted() {
document.title = 'new title'
}
}
</script>
Finally you can use Vue Meta 到 manage all metadata for your Vue app including title. First you need 到 add Vue Meta 到 your project and then use metaInfo field as shown below 到 configure metadata for your page or route.
{
metaInfo: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'My title'}
]
}
}
前4个解决方案是更改标题的静态方式，或者换句话说，您不能使用这些方式在运行时更改标题.此外，所有这些都不是热重新加载.最后两个选项使用JavaScript，可以在运行时操纵标题.