背景:当前项目首页和登陆后的平台在一个项目里,路由采用hash模式,现在要做SEO优化,这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大,影响范围比较广,同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用预渲染,然后用nginx代理来实现两个项目之间的跳转。

同构SSR服务端渲染这里就不多赘述了,说一下预渲染:

一、什么情况下用预渲染比较好

官方文档建议:如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 //about/contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

二、选用插件

官方文档建议:如果你使用 webpack,你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上,作者是 Vue 核心团队的成员。

结合vue-meta-info这一类动态设置meta信息的插件,可以达到更好的效果。

三、插件的使用

安装

# Yarn
$ yarn add prerender-spa-plugin
# or NPM
$ npm i prerender-spa-plugin

vue-cli3 webpack配置

在vue.config.js中:

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer module.exports = {
configureWebpack: {
module: {},
plugins: process.env.NODE_ENV === 'production' ? [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, process.env.VUE_APP_OUTPUT_DIR),
// 需要进行预渲染的路由路径
routes: ['/', '/about'],
// html文件压缩
minify: {
minifyCSS: true, // css压缩
removeComments: true // 移除注释
},
renderer: new Renderer({
// Optional - The name of the property to add to the window object with the contents of `inject`.
injectProperty: '__PRERENDER_INJECTED',
// Optional - Any values you'd like your app to have access to via `window.injectProperty`.
inject: {},
// 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}}),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
] : []
}
}

这里只在 process.env.NODE_ENV === 'production'的时候进行预渲染,输入目录为 process.env.VUE_APP_OUTPUT_DIR,是在.env   .env.prod  .env.test等全局环境变量中配置的,可以根据不同环境打包,如.env.prod的配置为:

NODE_ENV = production

VUE_APP_OUTPUT_DIR = 'dist-prod'
VUE_APP_PROJECT_URL = '/platform'

这里的VUE_APP_PROJECT_URL稍后再做解释。

以上的new PrerenderSPAPlugin({})配置中删除了

headless: false // Display the browser window when rendering. Useful for debugging.

目的是为了不打开chromium浏览器。

在main.js中配置:

new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event')) // 预渲染
}
}).$mount("#app")

vue-meta-info安装使用:

安装

# Yarn
$ yarn add vue-meta-info
# or NPM
$ npm install vue-meta-info --save

使用

import Vue from 'vue'
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
<template>
...
</template> <script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>

如果你的title或者meta是异步加载的,那么你可能需要这样使用

<template>
...
</template> <script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>

三、项目间跳转配置

现在说一下VUE_APP_PROJECT_URL这个变量,这个变量便是两个项目间跳转的关键。在本地开发中,可以通过设置.env中的变量:

VUE_APP_PROJECT_URL = 'http://localhost:8080'
另一个项目
VUE_APP_PROJECT_URL = 'http://localhost:8081'

然后通过window.location.href的方式进行两个本地项目之间的跳转:

export function toUrl (query) { // 动态更改href
window.location.href = process.env.VUE_APP_PROJECT_URL + query
}

至于线上怎么进行跳转,可以这么配置.env.prod中的变量:

VUE_APP_PROJECT_URL = '/'
另一个项目
VUE_APP_PROJECT_URL = '/platform'

然后在nginx中配置:

### 默认进入的项目 ###
server {
listen 30002;
server_name xxx.xx.xxx.xxx;
proxy_buffer_size 8k;
proxy_buffers 8 32k;
set $root /var/www/page-for-seo/dist-prod;
root $root;
index index.html index.htm index.php; error_log /var/nginx/logs/error.log error;
access_log /var/nginx/logs/access.log; #access_log off; ### 客户端请求错误处理 ###
error_page 403 404 /404.html;
location = /404.html {
return 404 'Sorry, File not Found!';
} ### 服务端请求错误处理 ###
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
} ### 静态资源有效期 ###
location ~ .*\.(jpeg|png|jpg|gif)$ {
expires 1d;
} ### 匹配所有请求 ###
location / {
try_files $uri $uri/ /index.php?$query_string;
} ### 匹配 platform/ 然后进行代理 ###
location ^~ /platform/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xxx.xx.xxx.xxx:30012/;
}
} ### 要进行跳转的项目 ###
server {
listen 30012;
server_name xxx.xx.xxx.xxx;
proxy_buffer_size 8k;
proxy_buffers 8 32k;
set $root /var/www/platform/dist-prod;
root $root;
index index.html index.htm index.php; error_log /var/nginx/logs/error.log error;
access_log /var/nginx/logs/access.log; #access_log off; ### 客户端请求错误处理 ###
error_page 403 404 /404.html;
location = /404.html {
return 404 'Sorry, File not Found!';
} ### 服务端请求错误处理 ###
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
} ### 静态资源有效期 ###
location ~ .*\.(jpeg|png|jpg|gif)$ {
expires 1d;
} ### 匹配所有请求 ###
location / {
try_files $uri $uri/ /index.php?$query_string;
}
}

Vue项目SEO优化的另一种姿态的更多相关文章

  1. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  2. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  3. VUE的Seo优化 如何实现

    今天看到这样一个问题,在vue中,如何进行seo优化呢? 大家应该都知道,seo优化主要是做搜索引擎的排名,但是ajax异步又不支持seo,同时对于url #/的写法,搜索引擎也没办法爬取网站内其他路 ...

  4. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  5. Vue项目性能优化整理

    以下方式基于 @vue/cli 快速搭建的交互式项目脚手架 1. 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然 ...

  6. 浅谈Vue 项目性能优化 经验

    我优化公司的项目总结的几点: 1.先查看引入的图片大小,如果太大了,可以压缩,压缩路径:https://zhitu.isux.us/ 2.代码包优化, 待下项目开发完成.进行打包源码上线环节,需要对项 ...

  7. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  8. vue项目性能优化,优化项目加载慢的问题

    一. 对路由组件进行懒加载: 如果使用同步的方式加载组件,在首屏加载时会对网络资源加载加载比较多,资源比较大,加载速度比较慢.所以设置路由懒加载,按需加载会加速首屏渲染.在没有对路由进行懒加载时,在C ...

  9. 如何对vue项目进行优化,加快首页加载速度

    上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢. 由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载 ...

随机推荐

  1. 第一篇 数据库MySql

    数据库的简介 数据库:存储数据的仓库 数据库管理系统软件 常见的数据库管理软件:甲骨文的oracle,IBM的db2,sql server, Access,Mysql(开源,免费,跨平台). 关系型数 ...

  2. 【Python入门学习】列表生成和函数生成器的方式实现杨辉三角

    列表生成: L = [i for i in range(10)] 列表生成器: g = (i for i in range(10)) 函数生成器使用的关键字yield实现 例如fib生成器 def f ...

  3. Python 装饰器Decorator(二)

    对于上一篇“”Python闭包“”随笔中提到的make_averager()函数的如下实现,我们把历史值保存在列表里,每次计算平均值都需要重新求和,当历史值较多时,需要占用比较多的空间并且效率也不高. ...

  4. loadrunner11--基础使用

    每次开启电脑都需要破解一次Lr,汉化版的有问题,建议使用英文版的.我测试的环境是Windows7+IE8+LR11.(在Windows10上试过,谷歌和IE11都不能正常运行),以下我会具体来操作,最 ...

  5. 评价Win8自带输入法

    对于人机交互设计,有以下四个基本原则:从用户角度考虑.从头到尾记住用户选择.短期刺激和长期使用的好处坏处.不让用户犯简单错误.我用的最多的是我的系统自带的输入法,评价的也只能是它了. 1.从用户角度: ...

  6. OpenCV学习笔记——Mat类型数据存储

    CV_[The number of bits per item][Signed or Unsigned][Type Prefix]C[The channel number] 比如 CV_8UC3 表示 ...

  7. 第一章 JavaScript简介

    DOM级别 DOM1:映射文档的结构 DOM2: DOM视图,定义了跟踪不同文档视图的接口(例如CSS应用前后的文档) DOM事件,定义了事件和事件处理的接口 DOM样式,定义了基于CSS为元素应用样 ...

  8. TCP系列49—拥塞控制—12、DSACK下的拥塞撤销

    一.概述 DSACK下的虚假重传的检测我们之前重传部分的文章已经介绍过了,这里简单说一下拥塞控制部分的实现. linux内部会维护一个undo_retrans状态变量,其值为已经重传的次数减掉被DSA ...

  9. .NET Core使用EF分页查询数据报错:OFFSET语法错误问题

    在Asp.Net Core MVC项目中使用EF分页查询数据时遇到一个比较麻烦的问题,系统会报如下错误: 分页查询代码: ) * condition.PageSize).Take(condition. ...

  10. IBM存储降级告警等一些服务器问题/dd/ethtool

    1.IBM存储降级告警 一般两种情况 a.端口降级 例如模块16G->8G(IBM储存端口自适应) b.系统在作raid后,有硬盘损坏,降级 黄灯告警 2. dimm error dimm内存插 ...