为了开发和构建我的项目,我使用 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
标签。
如何覆盖这些元标记?
最佳答案
thanksd给我带来了正确的答案。因为 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;
})
}
关于javascript - 在 vue.js 应用程序中设置视口(viewport)元标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53285704/