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

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

  标签内

2、json+ld

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