vue项目做seo优化(prerender-spa-plugin vue-meta-info)
今天公司考虑seo设计方案,服务端渲染(ssr)和 预渲染的方式,不过只是打算对几个简单的页面seo,所以选择了使用预渲染的方式,以下是实现过程中遇到的问题,供大家查看,有不对的地方请指正:
使用prerender-spa-plugin,官网文档说是必须使用history模式
1.history模式遇到的问题:
a.刷新页面出现空白
按照vue-router官方文档调整nginx,
location / {
try_files $uri $uri/ /index.html;
}
然后调整router/index.js ,添加 base:'/'
const router = new VueRouter({
mode: 'history',
base:'/',
routes: routes
});
最好修改config/index.js 中的build部分的 assetsPublicPath: '/',
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
....
因为我们是把打包发布后的程序放在了根目录下,所以base 和 assetsPublicPath 都写了 / ,如果网站访问形式是 http://www.XXX.com/web ,则需要把 / 该为 /web/ ,否则访问不到内容
b.请求首页数据没有问题,可是请求二级页面时接口获取数据错误,查看原因是请求路径是相对路径的原因,我们用的是axios,只需要把axios的baseurl改为绝对路径即可
2.安装prerender-spa-plugin遇到的问题
a.安装有的时候会出现安装失败的情况,建议用淘宝镜像安装 cnpm i prerender-spa-plugin --save-dev
b.安装后异步数据不出现,解决办法加延时 和 跨域 处理;
webpack.prod.conf.js:
...
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer ...
plugins: [
// 在vue-cli生成的文件的基础上,只有下面这个才是我们要配置的
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'), // 对应自己的路由文件,如果index有参数,则prerender-spa-plugin不适用(官方文档有说明)
routes: ['/','/pages/Detail'], // Server configuration options.
server: {
// Normally a free port is autodetected, but feel free to set this if needed.
port: 80,
proxy:{
'/api': {
target: 'http://www.xxx.com',
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': 'api' //需要rewrite重写的,
}
}
}
},
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
// 触发渲染的时间,用于获取数据后再保存渲染结果
renderAfterTime: 10000,
// 是否打开浏览器,false 是打开。可用于 debug 检查渲染结果
headless: false })
}),
... ]
以下是注意点:
A. 预渲染不适用于 渲染路由过多 和 动态路由 (如/detail/参数),只是适用于几个简单的固定路由的情景(例如 /index /about /contact)
B.如果首页类似于今日头条(m.toutiao.com)类似的,估计也会不适用,因为它可能只会预渲染 第一个分类下的前10条..;而且只是每次打包的时候执行预渲染,如果打包后后台又发布新文章了,则会造成预渲染数据和后台数据不同步的问题;
vue项目做seo优化(prerender-spa-plugin vue-meta-info)的更多相关文章
- vue spn如何做seo优化
vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...
- VUE 2.x SEO 优化问题 vue-meta-info && prerender-spa-plugin 配合使用
VUE 2.x SEO 优化问题,以及预渲染问题 1.新建项目可以采用nuxt.js , 配置meta.以及预渲染 都很方便,官网文档都很详细: 2.对于已有项目: vue-meta-info & ...
- 82.使用vue后怎么针对搜索引擎做SEO优化?
什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...
- 一个网站完整的SEO优化方案,方法,怎么做seo优化?
SEO优化主要分为站内优化,站外优化.如果非得说一套完整的SEO优化方案,那就是需要4名专业人员:前端人员,内容编辑,网络推广人员,和数据分析人员.那以下就详细介绍这四个岗位各自负责的工作有哪些: 一 ...
- 如何做seo优化才能获取搜索引擎排名?
现在网络上有很多网站,但是排名和流量都不理想,所以很多企业会很苦恼.所以我们经常思考如何使网站被搜索引擎喜欢,被用户喜欢,有一个良好的排名和流量? 在这个鱼龙混杂的网络中,seo优化实际上是seo网站 ...
- Vue项目使用CDN优化首屏加载
前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...
- 在vue项目中的js文件里使用vue实例
参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...
- 使用Prerender.io为angular项目做SEO
现在的项目的为了更好的分工明确,降低耦合都开始采用前后端分离的形式进式开发,我们也采用这种开发形式,前端用angular开发.虽说刚开始也遇各种坑,但是后期熟悉了之后简直爽呆.一个比较大的坑就是SEO ...
- 新网站如何做SEO优化【转】
“百度快照变慢了.百度收录问题.关键词掉了”,这是在卢松松留言本被经常问及的问题,新手站长往往会因此吃不下饭.睡不着觉,网站的推广是一个漫长的过程,“心急吃不了热豆腐”,不要整天想着一建站就有巨大的流 ...
随机推荐
- classPath与PATH
PATH是window的变量,而不是Java的变量: 通常配置PATH路径是为了找到需要的XX.exe命令,而且配置在用户的变量下面: 例如:JDK中的javac与java命令在cmd中使用,需要把命 ...
- MongoDB知识点拾遗梳理
MongoDB数据库安装: >apt-get install mongodb 0.MongoDB状态查看.启动.停止 >/etc/init.d/mongodb status或s ...
- python安装后环境变量的设置
win7系统中单击右击计算机->属性->高级系统设置->环境变量 在path目录下用分号分开做分割添加环境变量. 如果同时添加python2.x.x版本和python3.x.x版本两 ...
- 运维脚本while语法
循环的意思就是让程序重复地执行某些语句; whiler循环就是循环结构的一种,当事先不知道循环该执行多少次,就要用到while循环; while循环语句的运行过程 使用while循环语句时,可以根据特 ...
- lsmod语法
lsmod——显示已载入系统的模块 lsmod 其实就是list modules的缩写,即 列出所有模块. 功能说明:显示已载入系统的模块. 语法:lsmod 说明:执行lsmod指令,会列出所有已载 ...
- mysql数据库操作记录持续更新...
1.查看删除数据库表的唯一约束 SHOW INDEX FROM tbl_name (唯一约束也是索引) ALTER TABLE tbl_name DROP INDEX index_name 2.u ...
- ubuntu下,python2.7安装mysqlldb驱动方法
安装依赖: sudo apt-get install libmysqlclient-dev libmysqld-dev python-dev python-setuptools 安装MySQLdb p ...
- centos7 安装mysql出现Could NOT find Curses (missing CURSES_LIBRARY CURSES_INCLUDE_PATH)
今天安装mysql 5.7 编译时出现一下问题: [root@localhost software]# cd mysql-5.7.21 [root@localhost mysql-5.7.21]# c ...
- 小学生噩梦——四则运算题库(python 全功能实现)
Github: https://github.com/holidaysss 小组:龙天尧(代码实现),林毓植(浮点转分数函数,代码审查) PSP2.1 Personal Software Proces ...
- calculate TajimaD in perl
#!/usr/bin/perl use strict; use warnings; =pod--------------------------------------- this perl scri ...