前言:

  最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo!

步骤:

1、安装 prerender-spa-plugin,使用淘宝镜像安装 cnpm

cnpm install   prerender-spa-plugin -D
  • -D 表示在开发环境下使用
  • cnpm 淘宝镜像安装可以避免安装过程无端报错

2、预渲染一定要把路由模式变成history

const router = new Router({
mode: 'history', // 预渲染一定要模式改成history
routes: baseRoute
})

3、最好修改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/ ,否则访问不到内容

4、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: ['/','/index','/login'], // 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
// 在项目的main.js入口中使用 `document.dispatchEvent(new Event('render-event'))`
renderAfterDocumentEvent: 'render-event', // render-event: 声明的方法名
})
}),
... ]

5、main.js 入口文件中添加 document.dispatchEvent

...
new Vue({
el: '#app',
router,
store,
render: h => h(App),
/* 这句非常重要,否则预渲染将不会启动 */
mounted() {
document.dispatchEvent(new Event('render-event'))
}
})

6、前面五步都执行完后,我们开始打包了

npm run build

生成dist文件夹

下面我补充一下:

安装一个http server插件,可以直接执行dist文件夹下的index.html类似于直接把打包文件在服务器端部署运行了

1.安装 http server

npm i http-server -g   // 全局安装

2、进入到dist目录

cd dist

3、启动本地服务器

hs -o -p 9999  // 自动启动本地dist目录下的index.html

// 浏览器启动 127.0.0.1:9999

4、至此不出意外我们看到了浏览器端后端返回来了html文件,支持seo爬虫了

但是。。。。

有几个坑我这里必须记录下:

1、history模式下,修改nginx配置,不然页面刷新会报404

#配置Nginx动静分离,定义的静态页面直接从Nginx发布目录读取。
location / {
alias /data/mystatic/yihao01-iotstatic/;
try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}

2、修改webpack打包js的顺序,否则,打包完后会报 vue项目报错webpackJsonp is not defined

在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件。 传送门 CommonsChunkPlugin

但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。

可以手动改文件引用,但是推荐以下解决办法:

找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可

chunks: ['manifest', 'vendor', 'app']

我是手动修改文件引用的顺序的:

这样配置后真的不会报 webpackJsonp is not defined

3、还有第三个问题目前我还在思考中,就是我的首页做了登录拦截,用户没登录则路由跳转之前被拦截到登录页面,

加了这个pemmision.js到main.js入口文件后,我发现预渲打包后的dist目录只有 login, static, index.html 三个文件,

   而我预渲染的是三个页面

 routes: ['/','/index','/login'],

 按照需求,应该还要生成一个index文件夹,但是没有生成,还有index.html也没有生成有html内容的页面,还是只有一个<div id="app"></div>,什么内容都没有了!!!

 但是如果我删掉登录拦截的js后,就可以生成  index, login, static, index.html 四个文件了,而且index.html 是包含了首页内容的文件,
目前我还没搞清楚为什么会这样,这个先做记录后续知道了原因再来更新。。。

vue 预渲染遇到的坑的更多相关文章

  1. vue预渲染及其cdn配置

    VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...

  2. vue预渲染实践总结

    # 预渲染 ## 预渲染简介 SEO和首屏加载速度慢的问题,社区讨论最多的解决方案是同构 SSR,即首屏使用服务端渲染,之后的交互逻辑交给客户端处理,解决了单页应用带来的两个问题,但是也带来了服务器压 ...

  3. prerender-spa-plugin Vue预渲染配合meta-info优化seo

    记录一下解决方案的过程 先安装prerender和puppeteer插件  这个国外大神写的  github地址就不附上了(百度有) cnpm install prerender-spa-plugin ...

  4. vue 预渲染 prerender-spa-plugin

    1.预渲染说明 https://ssr.vuejs.org/zh/#为什么使用服务器端渲染-ssr-? 如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /cont ...

  5. prerender-spa-plugin预渲染踩坑

    为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整 ...

  6. vue项目使用 prerender-spa-plugin 预渲染

    由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...

  7. vue(初探预渲染)

    ---恢复内容开始--- 一.前言 1.简介预渲染                     2.案例演示(不配置预渲染)                     3.配置预渲染, 二.主要内容 1.简 ...

  8. Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...

  9. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

随机推荐

  1. pymysql 详解

    上一章 pymysql安装完之后 进入到pymysql路径下,可以看到下面文件列表 首先 这是我的pymysql文件路径 进入pymysql的文件夹 可以看到下面这些文件列表 pymysql 数据类型 ...

  2. python实现邮件的发送

    一.163邮箱设置 进入163邮箱,点击设置中的pop3/smtp/imap 开启smtp服务,如果没有开启,点击设置,手机号验证后勾选开启即可,开启后图如下: 主要用到的就是smtp服务器:smtp ...

  3. ZooKeeper 安装、配置

    http://blog.csdn.net/franklysun/article/details/6424582 如题本文介绍的是ZooKeeper 的安装和配置过程,此过程非常简单,关键是如何应用(将 ...

  4. 巩固java(一)----java与对象

         C语言是一种面向过程语言,在解决问题时,要先分析出问题的解决步骤,然后按顺序一步步实现,使用的时候一个一个调用.所以面向过程编程是以过程为中心的.      不同于面向过程编程,面向对象编程 ...

  5. Inception体验之安装

    Inception介绍 MySQL Inception是数据库管理员的工具.它允许DBA构建好的SQL语句,在只读数据集上测试它们,并最终针对生产数据库运行这些SQL语句,并且能够在SQL语句出于某种 ...

  6. ranker_worker.go

    package         outputDocs, numDocs := engine.rankers[shard].Rank(request.docs, request.options, req ...

  7. BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配

    BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若 ...

  8. 后端传Long类型至前端js会出现精度丢失问题

    今天开发遇到个问题,Java后端的Long类型数据,传到前端会出现精度丢失,如:164379764419858435,前端会变成164379764419858430.在浏览器中做测试可知,这就是一个精 ...

  9. Appium 【已解决】提示报错:Attempt to re-install io.appium.android.ime without first uninstalling.

    详细报错:Failed to install D:\AutoTest\appium\Appium\node_modules\appium\build\unicode_ime_apk\UnicodeIM ...

  10. ELK入门使用-与springboot集成

    前言 ELK官方的中文文档写的已经挺好了,为啥还要记录本文?因为我发现,我如果不写下来,过几天就忘记了,而再次捡起来必然还要经历资料查找筛选测试的过程.虽然这个过程很有意义,但并不总是有那么多时间去做 ...