在vue.js应用程序中设置viewport元标记
在开发和构建我的项目时，我使用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-tag中。
我怎么才能覆盖这些元标签？
回答 4
Stack Overflow用户
发布于 2018-11-14 10:31:59
感谢d给了我正确的答案。由于Vue CLI已经拥有html-webpack插件，所以我采用了正式的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>vue.config.js中的2集元标签
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;
})
}Stack Overflow用户
发布于 2018-11-14 06:00:55
你在使用vue-meta的过程中走上了正轨。
- 不要将它们静态地添加到
index.html文件中。 - 使用
vue-meta添加它们 - 将
vmid属性设置为某些唯一标识符，这样vue-meta将替换现有元标记的内容，而不是创建一个新标记。
Stack Overflow用户
发布于 2018-11-14 06:12:48
在构建我的项目时，默认情况下它会将这些元标记添加到index.html中。
是的，但在那之后你可以随意修改index.html。
我怎么才能覆盖这些元标签？
您可以在index.html中用经典的方式直接对它们进行硬编码，也可以使用您提到的插件。
我没有运气，有了维特海德和维美亚。这些插件只添加元标签，而不是过度使用它们。
这不是插件的问题: HTML没有提供一种覆盖元标记的方法。这取决于你设置正确的元标签。
https://stackoverflow.com/questions/53285704
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号