我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
vue cli4 预渲染生成静态html文件,seo优化,prerender-spa-plugin
当我们使用vue去创建一个官网的时候,或者是其他传统类型的html,就会触碰到vue的痛点,他没有seo优化。
因为所有的html全是js生成,你打包出来的文件,最终也只是一个简单的index.html,里面可以说什么都没有。这样的话是不利于爬虫抓取的,所以我们需要进行预渲染。
目前我将预渲染分为两种:
- 服务器渲染 ssr
- 本地打包渲染
服务器渲染ssr可能很多人不太清楚怎么回事,其实只要知道node后台服务搭建,那就肯定是知道的,因为所有的node框架,他都绕不过一个知识点,就是模板语法渲染html页面,这个就是所谓的ssr了。
可以理解成node的php写法吧。
这个由于目前还未遇到,而且之前学node也有写一些模板渲染的文章,就不多说了,这里讲讲如何通过插件,进行本地打包预渲染。
本地打包预渲染可以生成静态html文件,每个html文件都会有对于的信息,这样有利于爬虫抓取,但是你以为就像你平时写静态html文件那样的效果吗?
no no no 。。。
用户访问,实际上还是和单页app一样,index.html进去,通过js生成html,无刷新体验,而我们预渲染生成的文件,只是给爬虫抓。
prerender-spa-plugin 预渲染
使用该插件的优势就是在不改变源代码的情况下,可以生成静态html文件,这样任何项目都很快的上手,基本无损,除了安装插件非常头疼。
安装这个插件,非常艰难,因为这个组件需要依赖无头浏览器Puppeteer,而Puppeteer已经是几年前的产物了,已经很久不更新了,而且在国内环境,这个东西下载90%几率都是失败。
为此我总结了两点要求:
- 必须要翻墙,并且网络还要很好
- 本地配置
.npmrc
配置文件
.npmrc
配置文件直接在项目根目录创建,和package.json同级,文件名就是这个名字。
然后在里面填入:
puppeteer_download_host = https://npm.taobao.org/mirrors
然后保存。
开启fq,然后进行安装:
yarn add prerender-spa-plugin --dev
安装成功后,我们需要配置vue.config.js文件
module.exports = {
chainWebpack: config => {
//生产环境下
if (process.env.NODE_ENV === "production") {
//引用插件
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/', '/xxxx'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
}
}
}
}
这里,我们只需要修改routes这个数组,这个数组的值对应了你路由里面的页面,比如我有一个/user
的页面路径,那么这里也就填上/user
注意,路由必须是history模式
如果路由修改了base,那么可能会出现问题,我暂时未碰到这种需求,以后遇到了再折腾吧。
配置完vue.config.js后,我们还需要修改main.js
new Vue({
router,
store,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'));
}
}).$mount('#app')
我们加上一个mounted生命周期,里面照着写吧,反正也没啥好说的。
然后保存。
这样我们运行打包:yarn run build
你会发现dist里面会生成对应的静态html文件,并且打开html,里面是有内容的。
以上就是预渲染的教程了。
评论(0)