在 vue.js 应用程序中设置视口元标记
[英]Set viewport meta-tag in vue.js application
问题描述
For developing and building my project, I use Vue CLI 3.
为了开发和构建我的项目，我使用 Vue CLI 3。
When building my project, it adds these meta-tags to index.html by default.在构建我的项目时，它默认将这些元标记添加到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">
However, for mobile I want to add user-scalable=no to the viewport -tag.但是，对于移动设备，我想将user-scalable=no添加到viewport标签。
How can I override these meta-Tags?如何覆盖这些元标签？
With vue-head and vue-meta , I had no luck.使用vue-head和vue-meta ，我没有运气。 These plugins only add meta-tags instead of overrideing them.这些插件只添加元标记而不是覆盖它们。
4 个解决方案
解决方案1
6 已采纳 2018-11-14 10:31:59
thanksd brought me to the right answer. 谢谢我带来了正确的答案。 Since Vue CLI already has the html-webpack-plugin , I did it the official Vue CLI way ( https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin ). 由于Vue CLI已经有了html-webpack-plugin ，所以我采用了官方的Vue CLI方式（ https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin ）。
1 - Added public/index.html 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 - Set meta-tag in vue.config.js 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
You were on the right track with using vue-meta . 使用vue-meta你在正确的轨道上。
- Don't add them statically in your
index.htmlfile.不要在index.html文件中静态添加它们。 - Add them using
vue-meta使用vue-meta添加它们 - Set the
vmidproperty to some unique identifier, that wayvue-metawill replace the contents of the existing meta tag rather than creating a new one.将vmid属性设置为某个唯一标识符，这样vue-meta将替换现有元标记的内容，而不是创建新标记。
解决方案3
0 2018-11-14 06:12:48
When building my project, it adds these meta-tags to index.html by default.
Yes, but you can modify index.html at your will after that. 是的，但您可以在此之后随意修改index.html 。
How can I override these meta-Tags?
You can either hard code them directly in the classic way in index.html or use the plugins you mentioned. 您可以在index.html中以经典方式直接对它们进行硬编码，也可以使用您提到的插件。
With vue-head and vue-meta, I had no luck.
That is not a plugin's problem: HTML does not provide a way to override meta tags. 这不是插件的问题：HTML没有提供覆盖元标记的方法。 It is up to you to set the right meta tags. 您可以设置正确的元标记。
解决方案4
-2 2019-10-02 21:17:13
If, like me, you are interested in dynamic Open Graph protocol meta tags, you'll need to use the more verbose syntax to make sure you add Meta tags with property (instead of name) and content tags.如果像我一样，您对动态开放图谱协议元标记感兴趣，则需要使用更详细的语法来确保添加带有property （而不是名称）和content标记的元标记。
I know the original question doesn't specifically ask for these types of tags, but I'm going to share this to hopefully help anyone else who looking and couldn't find an answer to cover a broader type of meta tags.我知道最初的问题并没有专门要求这些类型的标签，但我将分享这个，希望能帮助其他任何寻找但找不到涵盖更广泛类型元标签的答案的人。
Here's an example, where you pass in an array of objects, instead of a single object:这是一个示例，您传入一个对象数组，而不是单个对象：
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;
});
You can define multiple meta tags in a single object (when you use the non-Array approach), but you'll lose control of the "property" tag name.您可以在单个对象中定义多个元标记（当您使用非数组方法时），但您将失去对“属性”标记名称的控制。
I was able to find this syntax within the examples show on this page: https://github.com/jaketrent/html-webpack-template我能够在此页面上显示的示例中找到此语法： https : //github.com/jaketrent/html-webpack-template
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.