在vue.js应用程序中设置viewport元标记

为了开发和构建我的项目，我使用Vue CLI3。

在构建我的项目时，默认情况下，它会将这些元标记添加到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-head和vue-meta，我运气不好。这些插件只添加元标签，而不是覆盖它们。

thanksd给了我正确的答案。由于Vue CLI已经有html webpack插件，所以我采用了Vue CLI的官方方式(https://cli.vuejs.org/guide/webpack.html#modifying-插件的选项(。

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;
    })
}

使用vue-meta是正确的。

不要在index.html文件中静态添加它们
使用vue-meta添加它们
将vmid属性设置为某个唯一标识符，这样vue-meta将替换现有元标记的内容，而不是创建新的元标记

在构建我的项目时，它通过违约

可以，但之后您可以随意修改index.html。

如何覆盖这些元标记？

您可以直接在index.html中以经典方式对它们进行硬编码，也可以使用您提到的插件。

有了vue头和vue元，我运气不好。这些插件只添加元标记，而不是覆盖它们。

这不是插件的问题：HTML不提供覆盖元标记的方法。这取决于你设置正确的元标签。

如果像我一样，您对动态Open Graph协议元标记感兴趣，则需要使用更详细的语法来确保添加带有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

相关内容

最新更新

热门标签：