如何在用vue cli 3创建的项目中找到或设置htmlWebpackPlugin.options.title？
我想为用vue cli 3创建的网页设置标题，从而查看public/index.html。在那里，我找到了<title><%= htmlWebpackPlugin.options.title %></title>。
如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title？
回答 8
Stack Overflow用户
发布于 2021-06-05 04:13:41
考虑到这个问题的受欢迎程度，我决定添加一个详细的答案和参考，以使它更真实和完整。我还创建了关于这个主题的文章，并在这和这课程中介绍了这个主题。
虽然问题是寻找设置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.在name中更改package.json字段
另一个简单的解决方案是更改"name": "your-project-name"。但是，可以在name中使用的package.json有许多限制。您可以阅读更多关于这个这里的内容。基本上，package.json必须包含一个名称，它必须是小写和一个单词，并且可以包含连字符和下划线。
3. pages字段在vue.config.js中的应用
vue.config.js是一个可选文件，您可以添加该文件以向Vue CLI提供其他配置，如果存在该文件，该文件将由Vue CLI自动加载。您需要在根文件夹中创建vue.config.js --包含package.json文件的文件夹。
根据Vue文档，您可以使用pages字段来定义多页面应用程序的切入点。但是，您也可以使用它来定义单个页面应用程序的标题。在根目录中创建vue.config.js并将pages字段添加到导出中，如下所示：
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
title: 'My Title',
},
}
}请注意，如果您已经在运行开发服务器，则只有在停止并重新启动开发服务器时才会反映此更改。换句话说，这些更改不会被重新加载。
4.锁链Webpack
您可以在链Webpack中使用vue.config.js，如下所示
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，可以在运行时操作标题。
Stack Overflow用户
发布于 2020-08-15 12:34:34
在根目录下创建一个文件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
Stack Overflow用户
发布于 2020-10-20 01:59:42
在您的package.json文件中更新package.json属性
{
"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.mode)
VUE_APP_NAME=Application flixible name这就是你在你的应用程序中不同地方的称呼。
AnyComponent.vue (作为数据属性)
TypeScript
appName: string = process.env.VUE_APP_NAMEJavascript
appName: process.env.VUE_APP_NAMEanyHTML.html
<%= process.env.VUE_APP_NAME %>https://stackoverflow.com/questions/62023604
复制相似问题
腾讯云开发者
