VUE的SEO的解决方案
时间:2020-04-17
本文章向大家介绍VUE的SEO的解决方案,主要包括VUE的SEO的解决方案使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
方案1:预渲染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
查找到说明成功了,恭喜你完成了。拍手庆祝吧!
方案2:静态化静态化是Nuxt.js打包的另一种方式,算是 Nuxt.js 的一个创新点,页面加载速度很快。
在 Nuxt.js 执行 generate 静态化打包时,动态路由会被忽略。
优势:
- 纯静态文件,访问速度超快;
- 对比SSR,不涉及到服务器负载方面问题;
- 静态网页不宜遭到黑客攻击,安全性更高。
不足:
- 如果动态路由参数多的话不适用。
原文地址:https://www.cnblogs.com/binmengxue/p/12718789.html
- HDU 2147 kiki's game(规律,博弈)
- HDU 1847 Good Luck in CET-4 Everybody!(规律,博弈)
- [network][udp]你不要偷偷发包,我跟你讲
- [快学Python3]HTTP处理 - urllib模块
- 关小刷刷题08 – Leetcode 26. Remove Duplicates from Sorted Array 方法2、3
- C++课程设计类作业2
- C++课程设计类作业4
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 代码分享系列(1)之感知机【代码可下载】
- C++课程设计类作业3
- [快学Python3]INI文件读写
- 【专知-PyTorch手把手深度学习教程08】NLP-PyTorch: 用字符级RNN生成名字
- Codeforces Round #415 (Div. 2)(A,暴力,B,贪心,排序)
- BZOJ 2456: mode(新生必做的水题)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Cypress系列(43)- visit() 命令详解
- 在GitLab pages上快速搭建Jekyll博客
- Dubbo项目中No provider available for the service xxx from registry xxx on the consumer问题的解决思路
- Mysql面对高并发修改的问题处理【2】
- java (多网卡环境下)发送组播广播(multicast/broadcast)失败问题
- activmq:android平台下使用openwire协议连接activemq服务的问题
- Leetcode No.9 回文数
- go-zero微服务框架入门教程
- 聊聊java中的哪些Map:(九)TreeMap源码分析
- 海康IPCamera结合OpenCV图像处理的一般步骤
- 聊聊java中的哪些Map:(十)各种map的总结
- SwiftUI:辅助功能——项目优化示例
- Visualizing the impact of ordered vs. random index insertion in InnoDB (16 顺序插入和随机插入索引的影响可视化分析)
- 一点思考|工作十几年了,竟从未用过do-while!
- springboot 默认日志配置源码