众所周知单页面应用不利于SEO,为了解决这个问题网上所给出的2个解决方案
1、SSH服务器端渲染
2、预渲染
由于页面较少,且预渲染相对于SSH比较简单,于是选择预渲染页面,预渲染可以极大的提高网页访问速度。而且配合一些meat插件,基本可以满足SEO需求
下面就来简单介绍一下
在webpack.prod.conf

const PrerenderSpaPlugin = require('prerender-spa-plugin')
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
  new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../static'),
   to: config.build.assetsSubDirectory,
  ignore: ['.*']
  }
  ]),
   new PrerenderSpaPlugin(
  //将渲染的文件放到dist目录下
   path.join(__dirname, '../dist'),
   //需要预渲染的路由信息
   [ '/','/index','/cjrl','/hqyc','/article','/subscribe'],
   // [ '/'],
  {
  //在一定时间后再捕获页面信息,使得页面数据信息加载完成
  captureAfterTime: 50000,
  //忽略打包错误
  ignoreJSErrors: true,
  phantomOptions: '--web-security=false',
  maxAttempts: 10,
  }
),
 
]
})
因hash模式不能预渲染所以要改为history模式
 
mode:'history'
 
然而更改为history模式后打包上传服务器页面一刷新就空白
所以需要服务器支持
 
 
 
最后页面刷新后 报文件找不到,更改下config里面的打包文件路径
使用绝对路径
 
assetsPublicPath: 'http://www.baidu.com/abc/',
 
 
 

vue-cil 服务端预渲染 prerender-spa-plugin的更多相关文章

  1. 服务端预渲染之Nuxt(介绍篇)

    现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...

  2. 服务端预渲染之Nuxt (使用篇)

    服务端预渲染之Nuxt - 使用 现在大多数开发都是基于Vue或者React开发的,能够达到快速开发的效果,也有一些不足的地方,Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前 ...

  3. 服务端预渲染之Nuxt(爬坑篇)

    Nuxt是解决SEO的比较常用的解决方案,随着Nuxt也有很多坑,每当突破一个小技术点的时候,都有很大的成就感,在这段时间里着实让我痛并快乐着.在这里根据个人学习情况,所踩过的坑做了一个汇总和总结. ...

  4. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

  5. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  6. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  7. Vue(SPA) WebPack模块化打包、SEO优化(Vue SSR服务端同构直出)、全浏览器兼容完整解决方案

    白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...

  8. 追求极致的用户体验ssr(基于vue的服务端渲染)

    首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...

  9. vue ssr服务端渲染

    SSR:Server Side Rendering(服务端渲染) 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容 ...

随机推荐

  1. Struts2中Action之ResultType

    我们在struts-defalut.xml文件中可以看到如下图所示: 这些类型是配置文件所带的.接下来我们主要讲解我标注出来的这个,其他的我就不做详解了,有兴趣的可以去试试. web.xml文件我在这 ...

  2. Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array (简单DP)

    题目:https://codeforces.com/contest/1155/problem/D 题意:给你n,x,一个n个数的序列,你可以选择一段区间,区间的数都乘以x,然后求出最大字段和 思路: ...

  3. Vue源码之 diff Vnode

    其实现在这个还没看懂,只能是初步看一下 _update调用__patch__方法,如果prevVnode(也就是oldVnode),旧vnode和新vnode对比,如果没有,就vnode就是vm.$e ...

  4. 汉化DevExpress

    现在的DevExpress组件包提供了TcxLocalizer,拖一个放到Form上. 然后设置相关的属性: 即可完成汉化了!怎么样,够简单!!! 需要DevChs.ini文件的朋友,点击链接加入群聊 ...

  5. IDEA Maven项目默认编译器使用JDK1.5的解决办法

    在idea中创建maven项目,项目指定用jdk1.8编译,每次更新maven库后,都会重新变成1.5.解决方案: 第一种: 在pom文件中,增加如下代码: <properties> &l ...

  6. CSS grid 模板

    在gridCSS属性速记属性显式设置所有的网格性质(grid-template-rows,grid-template-columns,和grid-template-areas和所有的网格性质(隐式gr ...

  7. RemindMe

    [最新版本:1.0.0.1] [公告:感谢使用!\r\n欢迎访问软件主页:http://www.cnblogs.com/dubuyunjie/p/8895488.html\r\n]

  8. QTCPSOCKET 客户端已连接 而服务器无响应

    最近在使用qt coding一个项目时,使用到了qtcpsocket模块来编写客户端与服务器.在windows平台下还能正常工作,但是在ubuntu平台下,客户端提示已连接时,服务器却没有响应.经过排 ...

  9. JAVA 集合 按照某个字段(依据一定条件)进行分组

    由于数据不能够在本地化实现, 无法通过sql语句得到对应的结果,小编只好在业务层处理.通过调用接口得到集合,拿到集合后,通过年来分组,以此来达到对应的Map集合... 在这里小编给大家提供一个封装了一 ...

  10. Python爬虫--简单的单词查询

    Refer to: https://github.com/gaopu/Python/blob/master/Dict.py 本程序参考自上面Github连接 该程序功能是输入一个单词可以给出这个单词的 ...