众所周知单页面应用不利于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. 使用飞冰组件关于点击行回填在input内(React)

    import { Table,Grid } from "@icedesign/base"; import { FormBinderWrapper as IceFormBinderW ...

  2. JAVA中接口与抛出异常的相关知识

    1.接口概念:接口可以理解为一种特殊的类,由全局常量和公共的抽象方法所组成. 类是一种具体实现体,而接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部数据,也不关心这些类里方法的实现细节,它只 ...

  3. js 发送http请求

    // 1.创建 XHR对象(IE6- 为ActiveX对象) // 2.连接及发送请求 // 3.回调处理 function createXMLHttpRequest() {     var xhr; ...

  4. generator mybatis逆向工程

    mybatis逆向工程:根据数据库中的表在项目中生成对应的 实体类,dao接口与mapper.xml映射文件 在eclipse中,以插件的形式的存在,把设置好的配置文件,直接通过eclipse中的插件 ...

  5. Alpha阶段敏捷冲刺总结

    项目感言 张艺琳 在这次冲刺中,我主要担任着PM的角色.不仅要梳理流程给小组每个成员进行分工,并且还要及时监督他们在要求时间内提交代码.同时我也参与到开发中去,与小组成员一起讨论数据库,最后一起设计出 ...

  6. Docker install GitLab

    示范一下如何透过Docker安装GitLab,也顺便将一些常用的东西纪录一下 作业系统: CentOS 7 安装Docker CE 1. 先移除系统上预先安装的Docker旧版本 yum remove ...

  7. pytest自动化5:pytest-html插件--生成html报告

    前言:pytest-HTML是一个插件,pytest用于生成测试结果的HTML报告.兼容Python 2.7,3.6 pytest-html 1.  pip 安装: pip install pytes ...

  8. zsh 缺省输入设置

    zsh 默认缺省方式和bash不兼容,终端输入指令带有* 并不能对所有以已经输入的部分作为开头的文件作处理,解决这个问题的方式是在.zshrc文件中加入 setopt no_match 即可

  9. 使用RevoUninstaller Pro卸载

    使用RevoUninstaller Pro卸载opera浏览器,操作过的注册表 HKEY_CURRENT_USER\SOFTWARE\CLASSES\Local Settings\Mircrosoft ...

  10. oracle的PDB启动

    /*以管理员身份登录*/sqlplus / as sysdba /*查看CDB的状态*/select status from v$instance; /*开启startup,默认是open*/star ...