vue seo 优化
2024-09-07 19:16:53
预渲染prerender-spa-plugin
如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。
优势:
- 改动小,引入个插件就完事;
不足:
- 无法使用动态路由;
- 只适用少量页面的项目,页面多达几百个的情况下,打包会很很很慢;
解决方案如下:
1.首先需要安装prerender-spa-plugin和vue-meta-info,prerender-spa-plugin解决打包多个页面,vue-meta-info解决SEO的问题
npm install --save prerender-spa-plugin
npm install --save vue-meta-info
2.在项目中找到webpack.prod.conf.js,有可能这个文件名不同,这个时候你需要根据你的命令行来找到相关文件
在此文件中添加如下代码
贴上相关代码
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, '../dist'),
// Required - Routes to render.
routes: [ '/', '/cart', '/list'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
3.在VUE项目中添加相关代码
贴上相关代码,
new Vue({
el: '#app',
router,
store,
render: h => h(App),
mounted () {
// You'll need this for renderAfterDocumentEvent. document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
4.到这里就完成打包成多个页面,执行打包命令
npm run build
5.打包完成会出现相关文件夹,每个文件都有相关的index,html说明打包成功
5接下去就是解决SEO的问题,导入vue-meta-info,然后使用
6然后在需要的组件中添加如下代码
贴上相关代码
metaInfo: {
title: '我是hello头', // set a title
meta: [{ // set meta
name: 'keyWords',
content: '我是hello关键字'
},
{
name: 'description',
content: '我是hello描述'
}]
}
7.再执行打包程序,这时候你再相关页面中查找相关meta
静态化静态化是Nuxt.js打包的另一种方式,算是 Nuxt.js 的一个创新点,页面加载速度很快。
在 Nuxt.js 执行 generate 静态化打包时,动态路由会被忽略。
优势:
- 纯静态文件,访问速度超快;
- 对比SSR,不涉及到服务器负载方面问题;
- 静态网页不宜遭到黑客攻击,安全性更高。
不足:
- 如果动态路由参数多的话不适用。
最新文章
- 分布式存储 FastDFS-5.0.5线上搭建
- LINQ系列:Linq to Object限制操作符
- 【WP开发】使用磁倾仪
- IE11无法支持Forms认证,,,也就是无法保存COOKIE
- iptable怎么用?
- MySQL线上执行大事务或锁表操作
- 270.	Closest Binary Search Tree Value
- [转]简析 IOS 程序图标的设计
- uoj 67 新年的毒瘤 割点
- 第四节 mount /who / mkdir /rmdir /rm /cp /mv /touch /cat /tac/head /tail /more /less / chmod /chown /umask /chattr /lsattr /history /echo
- 检查对象是否为NULL或者为Empty
- redis学习——数据持久化
- linux注释多行
- Servlet(1)—Servlet容器tomcat和HTTP协议
- 修改Electron的libcc(libchromiumcontent)源码,重新编译electron, 设置event.isTrusted为true
- python 文档
- hdu1542 Atlantis (线段树+矩阵面积并+离散化)
- RabittMQ实践(一): RabbitMQ的安装、启动
- HTML中特殊字符
- 2018.11.18 Sturts2配置详解&;常量配置进阶
热门文章
- .NET 开源工作流: Slickflow流程引擎高级开发(八) -- 审批网关(ApprovalOrSplit)模式的应用
- Cassandra存储附带索引(SAI)全新上线
- Nginx下关于缓存控制字段cache-control的配置说明
- [PHP安全特性学习]strcmp()函数安全漏洞
- C#设计模式-外观模式(Facade Pattern)
- Java8用了这么久了,Stream 流用法及语法你都知道吗?
- EasyRecovery帮您轻松拯救办公室断电后的文件丢失
- 根节点到叶子节点路径之和为target
- pytest失败重跑
- 【P2634】聪聪可可——点分治