踩坑经历
官方给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的使用可以在任意的组件中进行添加设置