vue3的SEO优化(使用prerender-spa-plugin-next + vue-meta-info)
前言
如果你只是需要对少数页面需要做SEO处理,可以使用 prerender-spa-plugin进行预渲染,若需要对几百上千的页面进行SEO优化,那么下面的操作并不友好。
一、生成预渲染文件
1.安装 prerender-spa-plugin-next
npm install prerender-spa-plugin-next --save
2. vue.config.js
const{ defineConfig }=require('@vue/cli-service')const PrerenderSPAPlugin =require('prerender-spa-plugin-next')
module.exports =defineConfig({lintOnSave:false,transpileDependencies:true,configureWebpack:{plugins:[newPrerenderSPAPlugin({routes:['/index','/test']// 需要预渲染的页面,要与router路由一致})]}})
3. 路由配置
import{ createRouter, createWebHistory }from'vue-router'// 路由参数配置const router =createRouter({history:createWebHistory(),// 这里必须是history模式 其他模式会导致后面打包生成的静态文件内容都是一样的,不能起到预渲染的作用routes:[{path:'/index',name:'index',component:()=>import('@/views/home/index.vue')},{path:'/test',name:'test',component:()=>import('@/views/test/index.vue')}]})exportdefault router
4.运行打包命令
打包后可以在dist文件下看到index、test两个文件,并且每个页面都有编译好的html代码
index/html
test/html
二、使用vue-meta-info修改html内meta参数
1.安装 vue-meta-info
npm install vue-meta-info --save
2.main.js
main.js文件 添加下面代码
import MetaInfo from'vue-meta-info'
app.use(MetaInfo)
3.页面内使用
<template><div class="development">
这里是test页面
</div></template><script>exportdefault({name:'',components:{},props:{},setup(){return{}},metaInfo:{title:'我是一个title',meta:[{name:'keywords',content:'关键字1,关键字2,关键字3'},{name:'description',content:'这是一段网页的描述'}]}})</script>
4.运行打包命令
此时打包后的test文件下html文件中meta值就是metaInfo内的指定内容
部署后,查看网页源代码效果
版权归原作者 怪味曲奇呀 所有, 如有侵权,请联系我们删除。