javascript - 在 vue.js 应用程序中设置视口(viewport)元标记

标签 javascript vue.js

为了开发和构建我的项目,我使用 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 标签。

如何覆盖这些元标记?

vue-headvue-meta ,我没有运气。这些插件只添加元标记而不是覆盖它们。

最佳答案

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/

相关文章:

javascript - 两个 'equal' javascript 对象不相等

javascript - JQuery 验证 - 模式规则无法像自定义正则表达式方法一样工作

vue.js - 从 Vue 指令访问组件名称

vue.js - 如何在 VueJS 中 $watch 列表项的属性

javascript - 无法点击 Sencha 中的按钮

javascript - Angularjs dom加载准备就绪

javascript jquery mobile 在for循环中创建按钮

javascript - vue.js props 也会发生 setter/getter 吗?

html - 如果我从左到右书写,如何更改换行方向以保持旧行在顶部和新行向下突破?

javascript - 当数组值彼此相等时,VueJS v-for 循环中断