vue 处理seo问题

最新推荐文章于 2024-08-28 00:18:03 发布

一枚程序小哥哥

最新推荐文章于 2024-08-28 00:18:03 发布

阅读量509

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39882919/article/details/122892853

版权

本文介绍了在Vue项目中使用prerender-spa-plugin进行预渲染，并结合vue-meta-info管理页面元信息的步骤。通过预渲染，可以提高静态页面的SEO和加载速度。同时，vue-meta-info允许动态设置页面的title、meta和link标签，提升用户体验。

摘要由CSDN通过智能技术生成

首先安装插件cnpm install prerender-spa-plugin --save
// webpack.conf.js
var path = require(‘path’)
var PrerenderSpaPlugin = require(‘prerender-spa-plugin’)

module.exports = {
// …
plugins: [
new PrerenderSpaPlugin(
// 编译后的html需要存放的路径
path.join(__dirname, ‘…/dist’),
// 列出哪些路由需要预渲染
[ ‘/’, ‘/about’, ‘/contact’ ]
)
]
}
在这里插入图片描述
npm install vue-meta-info --save
import Vue from ‘vue’
import MetaInfo from ‘vue-meta-info’

Vue.use(MetaInfo)
在这里插入图片描述

metaInfo: {
title: ‘My Example App’, // set a title
meta: [{ // set meta
name: ‘keyWords’,
content: ‘My Example App’
}]
link: [{ // set link
rel: ‘asstes’,
href: ‘https://assets-cdn.github.com/’
}]
}