vue单页面应用改造为多页面服务端渲染

更新日期: 2019-09-09阅读: 2.7k标签: 渲染

正在开发中的项目是采用vue,Vue+router搭建的单页面应用,因2C项目有seo的需求,就需要把当前的项目改为多页面+服务端渲染,调研之后使用了easywebpack-cli脚手架,基于Egg + Vue + Webpack4多页面服务端渲染项目开发模板进行改造。


一:为什么要做SEO

提高网站搜索排名,从而吸引更多的潜在客户来浏览网站,目的是增加网站访问量,提升企业的销售业绩,获得效益搜索网站通过爬虫爬取网页内容,SEO让爬虫更好的理解网页内容(主要是文本)


二:为什么单页面无法做SEO

一般的单页面是发送一个“空白”的html浏览器,浏览器通过再获取页面对应的js文件, js操作dom展示页面,但是SEO无法去解析js的内容,爬虫所“看到”的,其实是一个空白的页面,SEO中重要的TDK,在单页面应用中只能设置固定的TDK,或者通过js去设置的,再次设置的实际爬虫也是无法获取的,再者,单页面应用在访问跳转页面时,实际只是替换了中间变化的模板部分,整体模板头部尾部是不变的,这就造成了对浏览器而言,实际我们访问的一直都是一个地址只是后面的参数在变化,对于很多网站分析工具就无法做针对用户访问路径的优化分析单页面的模式,在切换页面,访问URL上体验好,流畅度高,对于部署也较简单,但是对有SEO需求的就不是很友好了

多页面单页面对比

单页面多页面
模式
公共模板(头部底部),多个页面模板组成
多个完整页面构成,整体切换,完整URL跳转
用户体验加载快,切换流畅度高,用户体验好切换加载较慢,流畅度不高
适用场景追求操作流畅,用户体验的应用高度支持搜索引擎的应用
部署维护部署实现简单,维护简单部署维护相对复杂

三:改造过程

1、路由

原路由采用vue-router,egg.js不支持这种方式,需要把路由转化为对应的路由easywebpack-cli脚手架地址/app/router.js

module.exports = app => {
     app.get('/home', app.controller.home.index);
}

在控制器中/app/controller/home.js设置路由对于的模板或接口

module.exports = app => {
    return class HomeController extends app.Controller {
        async index() {
            const {ctx} = this;
            await ctx.render('home/index.js');
        }
    }
}

上例渲染了一个模板返回到页面,模板地址/app/web/page/home/index.vue路由配置支持/home/:id params参数,控制器通过ctx.params可获取,在控制器也可以返回模板带入参数数据

module.exports = app => {
    return class HomeController extends app.Controller {
        async index() {
            const {ctx} = this;
            await ctx.render('home/index.js', {
                id: ctx.params.id,
                data: [1, 2, 3]
            });
        }
    }
}

在浏览器端vue模板内,可通过this.data直接获取到控制器传回的参数路由代理,使用egg-http-proxy配置路由代码,更新包之后,在config/plugin.js里配置中间件,

exports.httpProxy = {
    enable: true,
    package: 'egg-http-proxy'
};
// 在config/config.default.js里引用并配置地址
exports.httpProxy = {
    '/oldServer': 'http://xxx.com',
    '/otherServer': 'http://xxx.com'
};

返回指定文件,例如favicon.ico,sitemap.xml等,可在config/config.default.js siteFile里配置

exports.siteFile = {
    '/favicon.ico': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/images/favicon.ico')),
    '/sitemap.xml': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/sitemap.xml'))
};

2、模板

项目有两套模板,/app/web/component/layout/index.js 服务器端模板,/app/web/view/layout.html 浏览器端模板,当服务端渲染出现错误,js报错或在created中调用window,localStorage等,导致服务端无法正常渲染时,就会调用备用的浏览器端渲染模板,也可通过controller控制根据不同场景渲染返回不同的模板,下例通过判断不同设备PC或wise,返回不同的模块

if (isMobile(ctx.get('user-agent'))) {
    await ctx.render('home/index.js');
} else {
    await ctx.render('home/indexPc.js');
}

3、TDK的改造

title

  • 每个页面单独的title;
  • 主题明确,涵盖页面主旨内容
  • 不罗列关键词,使用户能够快速分辨出主题,最好不超过17个中文汉字,否则在搜索结果中会被折行
  • 重要内容往左放,保持语义通顺
  • 使用用户熟知或习惯用语
  • 如果品牌名高,最好能展示出来名牌词

keywords

  • 高度概括网站主题服务的一至三个关键词
  • 关键词的同义词
  • 网站所属的上一级别关键词(不一定能有),避免过于宽泛
  • 品牌词或服务词
  • 用户潜在需求相关关键词(比如保险的可能涉及到投资)
  • 关键词相关的长尾关键词,一般比较长,如“百年人寿保险怎么样”
  • 考虑用户可能会通过什么样的关键词查找到我们的网站

description

  • 对title的补充,准确描述页面内容,不堆砌关键词(否则会被搜索引擎判定作弊嫌疑)
  • 每个页面要有不同的description,尽量不适用默认一样的
  • 适当的长度,超出会被截断


四:SEO改造

Sitemap:网站地图,告知搜索引擎那些页面可供抓取,有利于隐藏层级较深的页面
一般为xml格式,设置成功之后需在站长平台提交

robots.txt :爬虫协议,爬虫访问的第一个文件,告知那些页面可以访问,那些禁止访问

两个文件都被放置在网站跟目录并可直接访问,配置config/config.default.js siteFile

exports.siteFile = {
    '/favicon.ico': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/images/favicon.ico')),
    '/sitemap.xml': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/sitemap.xml')),
    '/robots.txt': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/robots.txt'))
};


五:其他优化

1、语义化

  • 文档类型统一使用HTML5 doctype <!DOCTYPE HTML>
  • meta标签优化,主要有title、description、keywords三个地方,结束不要使用“ />”,应该直接写“>”
  • css文件最好使用一个,放在头部<head>标签里面
  • js文件最好放在底部,避免因加载js文件阻塞HTML的渲染
  • 使用外联文件,避免在HTML直接写css和js的代码
  • 引入文件时使用绝对地址,绝对地址包括了网站的域名
  • img标签加上alt关键字,利于SEO优化,尽量不要使-用“的”、“上”、“好”、“等等”等,搜索引擎数据库默认不收录的字
  • 当图片过多时使用懒加载
  • logo处加h1标签,搜索引擎默认h1标签这个标题是网页中最重要的信息,所以我们把最重要信息入在<H1>标签内

2、json+ld

2011年Google,Bing,Yahoo!和Yandex共同努力为网络创建统一的结构化数据词汇表(但是,Bing和其他搜索引擎尚未正式声明他们支持Schema.org的JSON-LD实现),结构化数据是用于提供关于页面的信息并分类页面内容的标准化格式,例如文章标题,简介,作者,图片等信息,基于json格式,简单易懂,更方便搜索引擎理解页面内容


链接: https://www.fly63.com/article/detial/5832

vue中数据更新变化,而页面视图未渲染的解决方案

在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。

服务端渲染和客户端渲染的对比

这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template。当不需要对SEO友好的时候,推荐使用客户端渲染;当需要对 SEO友好的时候,推荐使用服务器端渲染

解决使用vue.js未渲染前代码显示问题

在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak

在微信小程序中渲染html内容的实现

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?

原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

估计大家都听过,尽量将 CSS 放头部,JS 放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂

Vue渲染数据理解以及Vue指令

原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏览器的重绘和回流),Vue是一个mvvm框架(库),大幅度减少了DOM操作

Web渲染那些事儿

在决定渲染方式时,需要测量和理解真正的瓶颈在哪里。静态渲染或服务器渲染在多数情况都比较适用,尤其是可交互性对JS依赖较低的场景。下面是一张便捷的信息图,显示了服务器到客户端的技术频谱:

vue从后台获取数据赋值给data,如何渲染更细视图

如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况。官网API是这样介绍的:Vue.set(target,key,value)

react 异步加载数据时的渲染问题

当数据需要异步加载时render获取不到数据可能会报一些错误,此时需要在render函数中加一个判断.行到render时,state对象的haveData为false, 所以此时页面展示 loading,当异步获取数据成功时

Vue.js中v-html渲染的dom添加scoped的样式

在vue.js中,要将一段字符串渲染成html,可以使用v-html指令。但是 官方文档 中的v-html部分也提醒了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!