javascript - 在使用 vue cli 3 创建的项目中,在哪里可以找到或如何设置 htmlWebpackPlugin.options.title?
问题描述
我想为使用 vue cli 3 创建的网页设置标题,因此查看了public/index.html
. 在那里,我发现<title><%= htmlWebpackPlugin.options.title %></title>
.
如何htmlWebpackPlugin.options.title
在 vue cli 3 项目中设置和修改?
解决方案
鉴于问题的受欢迎程度,我决定添加一个带有参考的详尽答案,以使其更加真实和完整。我还创建了一篇关于这个主题的文章,并在本课程和本课程中涵盖了这个主题。
虽然问题是寻找设置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
. 您可以在此处阅读有关此内容的更多信息。基本上,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 元
最后,您可以使用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 并且可以在运行时操作标题。
推荐阅读
- sqlite - window.sqlitePlugin 未定义 - 但已安装 sqlite
- python - 是否可以将对象字段直接初始化为 __init__ 关键字参数?
- oracle - 预言机序列是否有可能生成小于最新生成值的值
- list - 在 DB2 存储过程中传递一个列表/数组
- .htaccess - 获取要在特定 URL 上忽略的重写规则
- c++ - 创建具有受限属性的类型
- python - 将 json 字符串图像转换为 numpy 二维数组
- openssl - Wireshark 中的 .pem 文件格式
- neo4j - 我们可以使密码字段查询不区分大小写吗
- python - 使用基于内部最低值的 pandas 数据框对数据集进行排序