在 vue.js 应用程序中设置视口元标记
[英]Set viewport meta-tag in vue.js application
问题描述
为了开发和构建我的项目，我使用 Vue CLI 3。
在构建我的项目时，它默认将这些元标记添加到index.html 。
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
但是，对于移动设备，我想将user-scalable=no添加到viewport标签。
如何覆盖这些元标签？
4 个解决方案
解决方案1
6 已采纳 2018-11-14 10:31:59
谢谢我带来了正确的答案。 由于Vue CLI已经有了html-webpack-plugin ，所以我采用了官方的Vue CLI方式（ https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin ）。
1 - 添加了public / index.html
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
<meta charset="utf-8"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
2 - 在vue.config.js中设置元标记
chainWebpack: (config) => {
config
.plugin('html')
.tap(args => {
args[0].title = 'MyApp title';
args[0].meta = {viewport: 'width=device-width,initial-scale=1,user-scalable=no'};
return args;
})
}
解决方案2
0 2018-11-14 06:00:55
使用vue-meta你在正确的轨道上。
- 不要在
index.html文件中静态添加它们。 - 使用
vue-meta添加它们 - 将
vmid属性设置为某个唯一标识符，这样vue-meta将替换现有元标记的内容，而不是创建新标记。
解决方案3
0 2018-11-14 06:12:48
构建项目时，默认情况下会将这些元标记添加到index.html。
是的，但您可以在此之后随意修改index.html 。
如何覆盖这些元标记？
您可以在index.html中以经典方式直接对它们进行硬编码，也可以使用您提到的插件。
有了vue-head和vue-meta，我没有运气。 这些插件只添加元标记而不是覆盖它们。
这不是插件的问题：HTML没有提供覆盖元标记的方法。 您可以设置正确的元标记。
解决方案4
-2 2019-10-02 21:17:13
如果像我一样，您对动态开放图谱协议元标记感兴趣，则需要使用更详细的语法来确保添加带有property （而不是名称）和content标记的元标记。
我知道最初的问题并没有专门要求这些类型的标签，但我将分享这个，希望能帮助其他任何寻找但找不到涵盖更广泛类型元标签的答案的人。
这是一个示例，您传入一个对象数组，而不是单个对象：
config.plugin('html').tap(args => {
args[0].meta = [
{
property: 'og:image',
content: `${environment_url}/images/logos/my_logo.png`,
},
{
property: 'og:image:width',
content: '1200',
},
{
property: 'og:image:height',
content: '1200',
},
];
return args;
});
您可以在单个对象中定义多个元标记（当您使用非数组方法时），但您将失去对“属性”标记名称的控制。
我能够在此页面上显示的示例中找到此语法： https : //github.com/jaketrent/html-webpack-template
如何将 Vue 3 Meta 与 Vue.js 3 一起使用？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.