Vue3 配置 vue-meta-info（SEO优化）

最新推荐文章于 2025-04-15 11:23:18 发布

张童瑶

最新推荐文章于 2025-04-15 11:23:18 发布

阅读量2.2k

点赞数

分类专栏：笔记记录 Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014641168/article/details/129619948

版权

笔记记录同时被 2 个专栏收录

275 篇文章

订阅专栏

Vue

31 篇文章

订阅专栏

安装

npm i vue-meta-info --save

main

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import MetaInfo from 'vue-meta-info';

createApp(App).use(router).use(MetaInfo).mount('#app')

使用

<template>
    <div>
        首页
    </div>
</template>

<script>
    export default {
        name: 'index',
        components: {},
        metaInfo () {
            return {
                title: this.title,
                meta: [
                    {
                        charset: "utf-8"
                    },
                    {
                        name: 'keyWords',
                        content: '张童瑶,wall,测试'
                    },{
                        name: 'description',
                        content: '一个SEO优化的测试网站'
                    }
                ],
                link: [{
                    rel: 'asstes',
                    href: 'https://assets-cdn.github.com/'
                }]
            }
        },
        data(){
            return {
                title:"我是标题"
            }
        }
    }
</script>

<style scoped>

</style>