Question

对于开发和构建项目，我使用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-head和vue-meta，我没有运气。这些插件仅添加元标记，而不是覆盖它们。

Answer 1

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

Answer 2

使用vue-meta使您处在正确的轨道上。

请勿将其静态添加到您的index.html文件中。
使用vue-meta
将vmid属性设置为一些唯一的标识符，这样vue-meta将替换现有元标记的内容，而不是创建新的元标记。

Answer 3

在构建我的项目时，它将这些元标记添加到index.html中，方法是默认。

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

如何覆盖这些元标记？

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

我用vue-head和vue-meta没有运气。这些插件仅添加元标记，而不是覆盖它们。

这不是插件的问题：HTML没有提供覆盖元标记的方法。您可以自行设置正确的元标记。

Answer 4

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

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

4 个答案: