在哪里可以找到或如何在用vue cli 3创建的项目中设置htmlWebpackPlugin.options.title？
我想为我用vue cli 3创建的网页设置标题，因此查看了public/index.html。在那里，我发现了<title><%= htmlWebpackPlugin.options.title %></title>。
如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title？
看着这个问题的受欢迎程度，我决定添加一个精心设计的答案，并附上参考资料，使其更加真实和完整。我还就这一主题创作了篇文章，并在这和这课程中涉及这一主题。
虽然问题是在寻找设置htmlWebpackPlugin.options.title，但最终的效果是改变网页的标题。
1.最方便和琐碎的解决方案
最简单的方法是修改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 to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这是由vue cli生成的默认public/index.html。在这里，你只需要改变
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
至
<title>Title of your choice</title>
2.改变package.json中的name字段
另一个简单的解决方案是改变"name": "your-project-name"。然而，你可以在package.json中使用的name有许多限制。你可以在这里阅读更多关于这个的内容。基本上，package.json必须包含一个名字，而且必须是小写字母和一个字，并可以包含连字符和下划线。
3.在vue.config.js中使用pages字段
vue.config.js是一个可选的文件，你可以添加它来为Vue CLI提供额外的配置，这个文件如果存在，将被Vue CLI自动加载。你需要在根文件夹中创建vue.config.js，即包含你的package.json文件的文件夹。
根据Vue 文档，您可以使用页面字段来定义多页面应用程序的入口。然而，你也可以用它来定义单页应用程序的标题。在根目录中创建vue.config.js，并将pages字段添加到你的出口中，如下所示。
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
title: 'My Title',
},
}
}
请注意，如果你已经在运行开发服务器，这个变化将只在你停止和重新启动开发服务器时反映出来。换句话说，这些变化将不会被热重载。
4.链接Webpack
你可以在vue.config.js中链式Webpack，如下图所示
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "My Vue App";
return args;
})
}
}
请注意，与解决方案3类似，如果你已经在运行开发服务器，那么这个变化将只在你停止和重启开发服务器时反映出来。换句话说，这些变化将不会被热重载。
5.使用JavaScript修改生命周期钩子中的标题
列表中的下一个解决方案是使用JavaScript来修改标题。你可以在你的根组件的mounted生命周期钩子中这样做，或者如果你希望不同的路由有不同的标题，你可以对每个路由加载的组件做同样的处理。
<script>
export default {
data() {
return {
//
};
},
mounted() {
document.title = 'new title'
}
}
</script>
6.使用Vue Meta
最后，您可以使用Vue Meta来管理Vue应用程序的所有元数据，包括标题。首先你需要将Vue Meta添加到你的项目中，然后使用metaInfo字段，如下图所示，为你的页面或路由配置元数据。
{
metaInfo: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'My title'}
]
}
}
总结
前4种解决方案是改变标题的静态方式，或者换句话说，你不能用这些方式在运行时改变你的标题。同时，这些都是不能热重载的。最后两个方案使用JavaScript，可以在运行时操作标题。
在根目录下创建一个文件vue.config.js。
//vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "My Vue App";
return args;
})
}
}
见https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin。
index.html中添加<title></title>标签呢？
- jean d'arme 2021-02-18
更新你的package.json文件中的name属性。
{
"name": "URL-friendly_app-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
...
},
"devDependencies": {
...
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
更新：上面提到的方法只有在你使用URL友好的标题时才会起作用。
还有几个其他的方法可以做到
.env（或任何.env.[模式]）。
VUE_APP_NAME=Application flixible name
在你的应用程序中，你可以在不同的地方这样称呼它
AnyComponent.vue（作为数据属性）。
术语解释：TypeScript
appName: string = process.env.VUE_APP_NAME
Javascript
appName: process.env.VUE_APP_NAME
任意HTML.html
<%= process.env.VUE_APP_NAME %>
只是纠正了其中一个带有绿色复选的脚本
<script>
export default {
data() {
return {
//
};
}
mounted() {
document.title = 'new title'
}
}
</script>
如果你使用的是vue-pwa插件，name是在site.webmanifest文件内设置的。
我已经简单地分配了htmlWebpackPlugin.options.title的值，就像这样。
<!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="WebStore" %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
简单的，我认为最好的方法是更新packer.json里面的name，你需要重新启动你的应用程序。
package.json文件的。
{
"name": "my title app",
}