我想为使用 vue cli 3 创建的网页设置标题,因此查看了 public/index.html
.在那里,我找到了 <title><%= htmlWebpackPlugin.options.title %></title>
.
如何设置和修改htmlWebpackPlugin.options.title
在 vue cli 3 项目中?
最佳答案
鉴于问题的受欢迎程度,我决定添加一个带有引用的详尽答案,以使其更加真实和完整。我还创建了 an article关于这个主题并在 this 中讨论了这个主题和 this培训类。
虽然问题是寻找设置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>
这是默认 public/index.html
由 vue cli 生成。而在这一点上,你只需要改变 <title>
<%= htmlWebpackPlugin.options.title %>
</title>
至<title>Title of your choice</title>
2.更改name
package.json
中的字段另一个简单的解决方案是更改
"name": "your-project-name"
.但是,name
有很多限制。您可以在 package.json
中使用.你可以阅读更多关于这个 here .基本上,package.json
必须包含一个名称,并且必须是小写字母和一个单词,并且可以包含连字符和下划线。3. 使用
pages
vue.config.js
中的字段vue.config.js
是一个可选文件,你可以添加它来为 Vue CLI 提供额外的配置,并且这个文件(如果存在)将由 Vue CLI 自动加载。您需要创建 vue.config.js
在根文件夹中 - 包含您的文件夹 package.json
文件。根据Vue documentation ,您可以使用 pages 字段来定义多页应用程序的入口点。但是,您也可以使用它来定义单页应用程序的标题。创建
vue.config.js
在根目录下添加pages
字段到您的导出如下:module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
title: 'My Title',
},
}
}
请注意,如果您已经在运行开发服务器,则只有在您停止并重新启动开发服务器时才会反射(reflect)此更改。换句话说,这些更改不会被热重载。4. 链接 Webpack
您可以chain Webpack在
vue.config.js
如下所示module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "My Vue App";
return args;
})
}
}
请注意,与解决方案 3 类似,仅当您停止并重新启动开发服务器时才会反射(reflect)此更改,以防您已经在运行开发服务器。换句话说,这些更改不会被热重载。5. 使用 JavaScript 修改生命周期钩子(Hook)中的标题
列表中的下一个解决方案是使用 JavaScript 修改标题。您可以在
mounted
中执行此操作根组件的生命周期钩子(Hook),或者如果您希望为不同的路由提供不同的标题,您可以对每个路由加载的组件执行相同的操作。<script>
export default {
data() {
return {
//
};
},
mounted() {
document.title = 'new title'
}
}
</script>
6. 使用 Vue 元最后你可以使用 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 并且可以在运行时操作标题。
关于javascript - 在使用 vue cli 3 创建的项目中,在哪里可以找到或如何设置 htmlWebpackPlugin.options.title?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62023604/