[JavaScript知识库] Vue3.0使用vue-meta

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue3.0使用vue-meta -> 正文阅读

[JavaScript知识库]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的使用可以在任意的组件中进行添加设置