vue+vue-meta-info动态设置meta标签教程

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

npm install vue-meta-info --save

import MetaInfo from 'vue-meta-info';
Vue.use(MetaInfo);

<template>
  ...
</template>
 
<script>
  export default {
     metaInfo: {
      title: '操作手册',
       meta: [
      { name:'viewport', content:
      'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'}
    ]
    },
  }
</script> 

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name: "App",
    metaInfo() {
      return {
        meta: this.metaData
      }
    },
    data() {
      return {
        metaData: [{
          name: 'viewport',
          content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
        }]
      }
    },
    watch: {
      $route(to, from) {
        if (to.name == 'pdf') {
          this.metaData = [{
            name: 'viewport',
            content: 'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'
          }]
        } else {
          this.metaData = [{
            name: 'viewport',
            content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
          }]
        }
      },
    },
  };
</script>

<style lang='less'>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
</style>