今天公司考虑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)的更多相关文章

  1. vue spn如何做seo优化

    vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...

  2. VUE 2.x SEO 优化问题 vue-meta-info && prerender-spa-plugin 配合使用

    VUE 2.x  SEO  优化问题,以及预渲染问题 1.新建项目可以采用nuxt.js , 配置meta.以及预渲染 都很方便,官网文档都很详细: 2.对于已有项目: vue-meta-info & ...

  3. 82.使用vue后怎么针对搜索引擎做SEO优化?

    什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...

  4. 一个网站完整的SEO优化方案,方法,怎么做seo优化?

    SEO优化主要分为站内优化,站外优化.如果非得说一套完整的SEO优化方案,那就是需要4名专业人员:前端人员,内容编辑,网络推广人员,和数据分析人员.那以下就详细介绍这四个岗位各自负责的工作有哪些: 一 ...

  5. 如何做seo优化才能获取搜索引擎排名?

    现在网络上有很多网站,但是排名和流量都不理想,所以很多企业会很苦恼.所以我们经常思考如何使网站被搜索引擎喜欢,被用户喜欢,有一个良好的排名和流量? 在这个鱼龙混杂的网络中,seo优化实际上是seo网站 ...

  6. Vue项目使用CDN优化首屏加载

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...

  7. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  8. 使用Prerender.io为angular项目做SEO

    现在的项目的为了更好的分工明确,降低耦合都开始采用前后端分离的形式进式开发,我们也采用这种开发形式,前端用angular开发.虽说刚开始也遇各种坑,但是后期熟悉了之后简直爽呆.一个比较大的坑就是SEO ...

  9. 新网站如何做SEO优化【转】

    “百度快照变慢了.百度收录问题.关键词掉了”,这是在卢松松留言本被经常问及的问题,新手站长往往会因此吃不下饭.睡不着觉,网站的推广是一个漫长的过程,“心急吃不了热豆腐”,不要整天想着一建站就有巨大的流 ...

随机推荐

  1. pycharm 输入法光标跟随

  2. oracle 建表默认空间

    oralce 建表后会有默认表空间,如果没有指定表空间会把所有信息放到users表空间内.要改默认空间 ,首先当前用户要有权限,然后按照 alter database 表名 tablespace 表空 ...

  3. fdisk -l查看硬盘分区信息及硬盘分区介绍

    原文:https://blog.csdn.net/a1809032425/article/details/79692035 linux fdisk 命令和df区别是什么? fdisk工具是分区工具:d ...

  4. 浏览器兼容性汇总--CSS篇

    目录 CSS篇 1.       cursor:hand   VS   cursor:pointer 2.        innerText在IE中能正常工作,但在FireFox中却不行 3.     ...

  5. wpf binging(五) 数据的转换与验证

    1.数据的验证,有时候需要验证同步的数据是否正常 需要派生一个类 ValidationRule 再把这个类指定给binging 进行验证 在这里如果验证不通过 textbox就会变成红色并且发出警告数 ...

  6. WEB学习笔记12-高可读性的HTML之如何正确设计表单

    网站中的用户登录.注册.用户调查等都是通过页面中的表单提交到网站服务器的.假设要实现让用户设置个人信息的一个表单. 该表格为两栏布局,第一栏中的文本左对齐,第二栏的表单控件右对齐,构成了最容易实现的表 ...

  7. 【oracle入门】数据库系统范式

    为了规范关系数据模型,关系型数据库系统在设计时必须遵守一定的规则,这种规则成为关系型数据库范式. 1.第一范式1NF 如果字段中的值已经是无法再分割的值,则符合第一范式,即1NF. 2.第二范式2NF ...

  8. 如何通过Chrome远程调试android设备上的Web网站

    网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模 ...

  9. Scala基础学习(一、数据类型)

    Scala 支持的数据类型: 数据类型 描述 Byte 8位有符号补码整数.数值区间为 -128 到 127 Short 16位有符号补码整数.数值区间为 -32768 到 32767 Int 32位 ...

  10. windows7 安装pytorch

    这几天为了运行python的图像转换的项目,不得不安装pytorch,安装了两天,最后把经验记录一下. 如果版本不匹配会抛出很多错误,而网上的各种解决方式有大部分也解决不了问题. 在安装pytorch ...