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

发布于11月14日

为了开发和构建我的项目，我使用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">

然而，对于移动设备，我想在viewport标签上加user-scalable=no.

如何覆盖这些元标记？

vue-head分和vue-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;
    })
}