在哪里可以找到或如何在使用 vue cli 3 创建的项目中设置 htmlWebpackPlugin.options.title?
where to find or how to set htmlWebpackPlugin.options.title in project created with vue cli 3?
我想为我用 vue cli 3 创建的网页设置标题,因此查看了 public/index.html
。在那里,我找到了 <title><%= htmlWebpackPlugin.options.title %></title>
.
如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title
?
在根目录
创建一个文件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
更新 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 友好标题时才有效。
还有其他几种方法
- 来自Vuejs官方文档Pages Configuration,您可以使用html插件配置为不同的页面指定标题
- 使用环境变量 Modes and Environment Variables 保存您的 app/page 头衔。我个人比较喜欢用这个方法。
.env(或任何 .env.[mode])
VUE_APP_NAME=Application flixible name
这就是您在应用中不同位置的调用方式
AnyComponent.vue(作为数据属性)
TypeScript
appName: string = process.env.VUE_APP_NAME
Javascript
appName: process.env.VUE_APP_NAME
anyHTML.html
<%= process.env.VUE_APP_NAME %>
如果您使用的是 vue-pwa
插件,name
是在 site.webmanifest
文件中设置的。
考虑到问题的受欢迎程度,我决定添加一个详细的答案并附上参考文献,使其更加真实和完整。我还创建了 an article on this topic and covered this topic in this and this 课程。
虽然问题是在寻找设置htmlWebpackPlugin.options.title
,但最终的效果是改变web-page的标题。
1。最方便和简单的解决方案
最简单的方法是修改 public/index.html
和 hard-code 标题。
<!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
有很多限制。您可以阅读更多相关内容 here。基本上,package.json
必须包含一个名称,该名称必须是小写字母和一个单词,并且可以包含连字符和下划线。
3。在 vue.config.js
中使用 pages
字段
vue.config.js
是一个可选文件,您可以添加它来为 Vue CLI 提供额外的配置,如果存在,该文件将由 Vue CLI 自动加载。您需要在根文件夹中创建 vue.config.js
- 包含您 package.json
文件的文件夹。
根据 Vue documentation,您可以使用 pages 字段定义 multi-page 应用程序的入口点。但是,您也可以使用它来定义单页应用程序的标题。在根目录中创建 vue.config.js
并将 pages
字段添加到您的导出中,如下所示:
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
title: 'My Title',
},
}
}
请注意,如果您已经是 运行 开发服务器,只有当您停止并重新启动开发服务器时,此更改才会反映出来。换句话说,这些更改不会被热重新加载。
4。链接 Webpack
您可以 chain Webpack in 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 个解决方案是更改标题的静态方法,换句话说,您无法使用这些方法在运行时更改标题。此外,所有这些都不是热重装的。最后 2 个选项使用 JavaScript 并且可以在运行时操作标题。
我只是简单地为 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",
}
我想为我用 vue cli 3 创建的网页设置标题,因此查看了 public/index.html
。在那里,我找到了 <title><%= htmlWebpackPlugin.options.title %></title>
.
如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title
?
在根目录
创建一个文件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
更新 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 友好标题时才有效。
还有其他几种方法
- 来自Vuejs官方文档Pages Configuration,您可以使用html插件配置为不同的页面指定标题
- 使用环境变量 Modes and Environment Variables 保存您的 app/page 头衔。我个人比较喜欢用这个方法。
.env(或任何 .env.[mode])
VUE_APP_NAME=Application flixible name
这就是您在应用中不同位置的调用方式
AnyComponent.vue(作为数据属性)
TypeScript
appName: string = process.env.VUE_APP_NAME
Javascript
appName: process.env.VUE_APP_NAME
anyHTML.html
<%= process.env.VUE_APP_NAME %>
如果您使用的是 vue-pwa
插件,name
是在 site.webmanifest
文件中设置的。
考虑到问题的受欢迎程度,我决定添加一个详细的答案并附上参考文献,使其更加真实和完整。我还创建了 an article on this topic and covered this topic in this and this 课程。
虽然问题是在寻找设置htmlWebpackPlugin.options.title
,但最终的效果是改变web-page的标题。
1。最方便和简单的解决方案
最简单的方法是修改 public/index.html
和 hard-code 标题。
<!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
有很多限制。您可以阅读更多相关内容 here。基本上,package.json
必须包含一个名称,该名称必须是小写字母和一个单词,并且可以包含连字符和下划线。
3。在 vue.config.js
中使用 pages
字段
vue.config.js
是一个可选文件,您可以添加它来为 Vue CLI 提供额外的配置,如果存在,该文件将由 Vue CLI 自动加载。您需要在根文件夹中创建 vue.config.js
- 包含您 package.json
文件的文件夹。
根据 Vue documentation,您可以使用 pages 字段定义 multi-page 应用程序的入口点。但是,您也可以使用它来定义单页应用程序的标题。在根目录中创建 vue.config.js
并将 pages
字段添加到您的导出中,如下所示:
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
title: 'My Title',
},
}
}
请注意,如果您已经是 运行 开发服务器,只有当您停止并重新启动开发服务器时,此更改才会反映出来。换句话说,这些更改不会被热重新加载。
4。链接 Webpack
您可以 chain Webpack in 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 个解决方案是更改标题的静态方法,换句话说,您无法使用这些方法在运行时更改标题。此外,所有这些都不是热重装的。最后 2 个选项使用 JavaScript 并且可以在运行时操作标题。
我只是简单地为 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",
}