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

添加到

视口

-标记中

如何覆盖这些元标记

---

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

您使用

vue-meta

的方法是正确的

不要在

index.html

文件中静态添加它们

使用

vue meta添加它们

将

vmid

属性设置为某个唯一标识符，这样

vue meta

将替换现有meta标记的内容，而不是创建新标记

在构建我的项目时，它通过以下方式将这些元标记添加到index.html 默认

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

如何覆盖这些元标记

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

有了vue head和vue meta，我就没有运气了。这些插件只会添加 元标记，而不是覆盖它们

这不是插件的问题：HTML不提供覆盖元标记的方法。由您来设置正确的元标记。

让我找到了正确的答案。因为Vue CLI已经有了html网页包插件，所以我采用了Vue CLI的官方方式（）

1-添加了public/index.html

---

如果您像我一样对动态元标记感兴趣，则需要使用更详细的语法来确保添加带有

属性

（而不是名称）和

内容

标记的元标记

我知道最初的问题并没有特别要求这些类型的标签，但我将与大家分享这一点，希望能帮助其他正在寻找答案但无法找到更广泛类型的元标签的人

下面是一个示例，其中传入一个对象数组，而不是单个对象：

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

您可以在单个对象中定义多个元标记（当您使用非数组方法时），但是您将失去对“属性”标记名称的控制

我在本页的示例中找到了这种语法：

---

可能是错误的，但我相信Vue在项目创建时只添加了一次。如果手动修改

index.html

文件，是否会在以后的开发过程中覆盖该文件？…vue cli使用webpack。因此，您可以通过在

vue.config.js

文件的

configureWebpack

钩子中提供一个HtmlWebpackPlugin来指定自定义模板。请参阅：“但是，对于移动设备，我想在viewport标记中添加user scalable=no。”-这几乎总是一个糟糕的想法，具有可访问性的含义。确认@War10ck所说的，您可以直接在编辑器中更新

index.html

。Vue不会修改此文件，它仅在您启动新项目时创建。您可以直接修改元标记的

index.html

文件。

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

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