vue3的SEO优化
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: [ new PrerenderSPAPlugin({ 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') } ] }) export default router
4.运行打包命令
打包后可以在dist文件下看到index、test两个文件,并且每个页面都有编译好的html代码
index/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.页面内使用
这里是test页面export default ({ name: '', components: {}, props: {}, setup () { return { } }, metaInfo: { title: '我是一个title', meta: [ { name: 'keywords', content: '关键字1,关键字2,关键字3' }, { name: 'description', content: '这是一段网页的描述' } ] } })
4.运行打包命令
此时打包后的test文件下html文件中meta值就是metaInfo内的指定内容
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...