众所周知单页面应用不利于SEO,为了解决这个问题网上所给出的2个解决方案
**1、SSH服务器端渲染
2、预渲染**
由于页面较少,且预渲染相对于SSH比较简单,于是选择预渲染页面,预渲染可以极大的提高网页访问速度。而且配合一些meat插件,基本可以满足SEO需求
下面就来简单介绍一下
在webpack.
var PrerenderSpaPlugin = require('prerender-spa-plugin')
var webpackConfig = merge(baseWebpackConfig, {
plugins: [
//这段代码意思是拷贝static文件至根目录使得渲染的文件可以找到js、css
new CopyWebpackPlugin([{
from: 'static'
}]),
new PrerenderSpaPlugin(
//将渲染的文件放到dist目录下
path.join(__dirname, '../dist'),
//需要预渲染的路由信息
[ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
{
//在一定时间后再捕获页面信息,使得页面数据信息加载完成
captureAfterTime: 50000,
//忽略打包错误
ignoreJSErrors: true,
phantomOptions: '--web-security=false',
maxAttempts: 10,
}
),
如果是一般不用跨域的网站到此已经完成,然而api需要跨域的时候请求的数据全部都请求不到,所有的页面都只有一个骨架,顺便贴一下跨域
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://192.26.26.xx/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
在打包之后跨域是不生效的,需要在nginx服务器做一个反向代理,
预渲染的时候请求全都是localhost:8080
所以没有数据信息
在网上查了半天也没发现怎么解决
查看prerender-spa-plugin的代码发现他是用的Hapi,找到插件下面的compile-to-html.js 文件发现下面这段代码
Server.start(function (error) {
// If port is already bound, try again with another port
if (error) return serveAndPrerenderRoute()
var maxAttempts = options.maxAttempts || 5
var attemptsSoFar = 0
var phantomArguments = [
Path.join(__dirname, 'phantom-page-render.js'),
'http://localhost:' + port + route,
JSON.stringify(options)
]
于是我突发奇想 将打包好的没有数据的文件放到nginx服务器上,由于服务器是做过反向代理的所以可以请求到数据,于是我将 'http://localhost:' + port + route,直接改成了我服务器上的地址 'http://192.164.xx.xx' + route,,于是预渲染成功了有了数据信息,我这也算是另辟蹊径了,不知道有没有大神知道到底该怎么配置,我查边文档也没有找到。