众所周知单页面应用不利于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. oracle问题 ORA-01843:not a valid month

    解决思路: 开始解决问题走了些弯路,搜了一些资料,结果大部分说的是修改会话的nls_date_language参数 可是线上正式项目,不能说改就改吧 就找其他方式解决 最终找到问题,to_date() ...

  2. mysql无法安装,报 The older version of MySQL Installer - Community cannot be removed. Contact your technical support group

    解决办法: C:\Users\Administrator>msiexec /i C:\Users\Administrator\Downloads\mysql-installer-web-comm ...

  3. jenkins部署安装

    http://www.cnblogs.com/lzcys8868/p/6286727.html

  4. styled-components的基本使用

    一.官网地址 https://www.styled-components.com/ 二.styled-components 1.styled-components 样式化组件,主要作用是它可以编写实际 ...

  5. lsmod语法

    lsmod——显示已载入系统的模块 lsmod 其实就是list modules的缩写,即 列出所有模块. 功能说明:显示已载入系统的模块. 语法:lsmod 说明:执行lsmod指令,会列出所有已载 ...

  6. [JsonSchema] 关于接口测试 Json 格式比对核心算法实现 (Java 版)

    引言 为什么要自己重新造轮子,而不是采用第三方的JsonSchema方法进行实现存在以下痛点:1.我之前在网上找了很久,没有找到java版直接进行jsonschema生成的方法或直接比较的方法2.ht ...

  7. JavaSpcript初识

    ---恢复内容开始--- 1-语法标准(Ecmascript) DOM BOM 2=特点以及适用范围 简单易用:封装好了一些方法,属性 基于对象 面向对象: 属于编程思维(思想) C#,C++,Jav ...

  8. erlang link 与 monitor

    erlang设计中,通常会有这样一个需求: 某一个进程必须依赖于令一个进程的概念,在这样的情况下就必须对两个进程之间建立一个监控或者说连接关系,以监听对方的死亡情况. erlang 提供了两个这样的方 ...

  9. iOS Masonry控件等比例布局

    一.先解释相关API 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /**  *  distribute with fixed spacing  *  *  ...

  10. 10_java基础——构造器里调用构造器

    package com.huawei.test.java04; /** * This is Description * * @author * @date 2018/08/30 */ public c ...