vue-cil 服务端预渲染 prerender-spa-plugin

时间：2018-05-17 11:37:25 阅读：304 评论：0 收藏：0 [点我收藏+]

标签：target www. director targe directory 报文 mod ESS 选择

众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案
1、SSH服务器端渲染
2、预渲染
由于页面较少，且预渲染相对于SSH比较简单，于是选择预渲染页面，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，基本可以满足SEO需求
下面就来简单介绍一下
在webpack.prod.conf

const PrerenderSpaPlugin = require(‘prerender-spa-plugin‘)

const webpackConfig = merge(baseWebpackConfig, {
plugins: [
 　　new CopyWebpackPlugin([
 　　{
　　 from: path.resolve(__dirname, ‘../static‘),
　　 to: config.build.assetsSubDirectory,
 　　ignore: [‘.*‘]
 　　}
 　　]),
　　 new PrerenderSpaPlugin(
 　　//将渲染的文件放到dist目录下
　　 path.join(__dirname, ‘../dist‘), 
　　 //需要预渲染的路由信息
　　 [ ‘/‘,‘/index‘,‘/cjrl‘,‘/hqyc‘,‘/article‘,‘/subscribe‘],
　　 // [ ‘/‘],
 　　{
 　　//在一定时间后再捕获页面信息，使得页面数据信息加载完成
 　　captureAfterTime: 50000,
 　　//忽略打包错误
 　　ignoreJSErrors: true,
 　　phantomOptions: ‘--web-security=false‘,
 　　maxAttempts: 10,
 　　}
 ),
 
 ]
})

因hash模式不能预渲染所以要改为history模式

mode:‘history‘

然而更改为history模式后打包上传服务器页面一刷新就空白

所以需要服务器支持

https://router.vuejs.org/zh-cn/essentials/history-mode.html

最后页面刷新后报文件找不到，更改下config里面的打包文件路径

使用绝对路径

assetsPublicPath: ‘http://www.baidu.com/abc/‘,

vue-cil 服务端预渲染 prerender-spa-plugin

标签：target www. director targe directory 报文 mod ESS 选择

原文地址：https://www.cnblogs.com/youji8/p/9049306.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行