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

╰+哭是因爲堅強的太久メ 2024-03-25 19:57 85阅读 0赞

### 安装 ###

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue骨架屏方案及vue-cli3优化

饿了么骨架屏][Link 1] [vue-cli3优化配置][vue-cli3] [Link 1]: https://github.com/niuyueyang/...

你的名字/ 2024年04月19日 09:58/ 0 赞/ 73 阅读

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

安装 npm i vue-meta-info --save main import { createApp } from 'vu

╰+哭是因爲堅強的太久メ/ 2024年03月25日 19:57/ 0 赞/ 86 阅读

相关 Vue Cli3 项目打包优化

一、新建项目使用 `vue-cli3` 构建一个初始的Vue项目：[Cli3 官方文档][Cli3] > 因为使用了cli3，很多目录结构不见了，而相关配置是放在`v

柔情只为你懂/ 2023年06月16日 12:53/ 0 赞/ 20 阅读

相关【VUE】vue-cli3配置eslint

[https://www.cnblogs.com/superlizhao/p/10956054.html][https_www.cnblogs.com_superlizhao_

雨点打透心脏的1/2处/ 2023年01月06日 11:43/ 0 赞/ 153 阅读

相关 Vue3 的模板编译优化

今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异，以及 VDOM 下 Diff 算法的优化。编译入口了解过 Vue3 的同学肯定知道 Vue3 引

Bertha 。/ 2022年12月21日 13:56/ 0 赞/ 203 阅读

相关 vue3.0配置vue-router

第一步：安装集成安装包 npm install vue-router --save 第二步：我们去package.json去看一下，如果vue-router是4.0

╰半橙微兮°/ 2022年11月06日 00:57/ 0 赞/ 99 阅读

相关 vue-cli3 vue.config.js配置

vue-cli3生成的项目比vue-cli2生成的项目目录简单很多,少了`build`与`config`文件夹，所以有的东西需要自己手动配置。条件：将npm更新至最新

迷南。/ 2022年10月11日 06:18/ 0 赞/ 184 阅读

相关 vue-cli3打包优化

vue-cli3.0相对于2.0，已经给我们优化了很多了，大家可以打开项目里的node\_modules，找到@vue/cli-serve, 这里也说一点，如果你想更深入的了

妖狐艹你老母/ 2021年11月23日 11:26/ 0 赞/ 591 阅读

相关 vue-cli3结合webapck优化

vue-cli3结合webapck优化 1 . 懒加载 (1). js 需要的时候加载 app.vue: <template>

骑猪看日落/ 2021年09月09日 05:24/ 0 赞/ 466 阅读

相关 vue3.0系列 —— 浅谈vue3.0性能优化

关于Vue3.0和鱿鱼西 vue3.0本质上是对vue2.0的一次项目重构，从3.0的版本更新中你可以看到很多自己工作中的影子。比如本章要讲的性能优化纯粹是因为之前

╰半夏微凉°/ 2021年09月07日 23:28/ 0 赞/ 569 阅读