Vue3.0使用vue-meta

踩坑经历

官方给meta设置是使用 vue-meta

如果使用 npm install vue-meta ，安装的是默认2.0版本

对于vue3.0，要使用alpha版本（测试用debug）

此时应该使用的命令如下

npm install vue-meta@next -S

打开package.json

默认 ^3.0.0-alpha.2 （如果按照配置去编写使用会报错，也可能不会报错）

如果出错则修改

"vue-meta": "^3.0.0-alpha.8"

然后执行

npm install

打开main.js

import { createMetaManager} from 'vue-meta'
 ​
 const app = createApp(App);
 ​
 app
 .use(createMetaManager(false, {
     meta: { tag: 'meta', nameless: true }
 }))
 .mount('#app')

打开App.vue

注意template标签中要使用 metainfo 标签才可以显示

<template>
   <metainfo></metainfo>
   <router-view></router-view>
 </template>
 ​
 <script>
 import { useMeta } from 'vue-meta'
 export default {
   name: 'App',
   mounted() {
     useMeta({
       title: '',
       htmlAttrs: { 
         lang: 'en', 
         amp: true,
       },
       meta: [
           {
               name: 'key',
               content: 'value'
           }
       ]
     })
   }
 }
 </script>

对于useMeta的使用可以在任意的组件中进行添加设置