prerender-spa-plugin预处理vue项目实践

由于公司想要把商城做由之前的php和前端混合开发改版为前后端分离，所以拿现在手上的vue项目来实践一下

https://github.com/chrisvfritz/prerender-spa-plugin

1.使用官方的vue-cli手脚搭建的项目跑prerender-spa-plugin一直报权限问题什么的

一个是由于路由写得有问题导致

另外一个是assetsPublicPath: './'写成这样导致改成assetsPublicPath: '/'就好了

2.prerender-spa-plugin打包出来的页面是空白的

那是因为你开启了路由的mode: 'history'，这个模式需要在服务器下才能访问

而prerender-spa-plugin如果vue不开启history打包出来的都会是你

new PrerenderSPAPlugin({
　　staticDir: path.join(__dirname, '../dist'),
　　routes: [ '/', '/home','/brokerage'],
})

routes里面第一配置的内容，所以页面都是这个内容，所以一定要开启history模式的

而history模式必须要放在服务器里面才能跑起来的，否则是空白页

3.放在服务端的时候要放在根目录下不然也是空白的因为路由找不到

或者你可以在Router里面加上base:xxxx,来指向你对应目录又或者在每个路由的path前面加上前面的路径

如http://localhost:4388/help/index

{
path: '/help/index',
name: 'index',
component: index
},

4.子路由的静态文件路径有问题

如http://localhost:4388/help/index

里面的静态资源src="static/js/manifest.js"会变成http://localhost:4388/help/static/js/manifest.js

所以我们的assetsPublicPath: './'写成assetsPublicPath: '/'根据根目录来才不会找不到文件

5.局限

（1）没法使用动态路由

必须为要渲染的每个类别添加单独的路线，例如/catalog/:id这个ID一定要写死的

（2）商品等动态信息是动态获取的没法seo（对于门户网址致命）

（3）页面刷无法读取路由，需要服务器重定向到首页否则404

或者报错webpackJsonp is not defined（可能是我的配置错误导致）

网上说的在

new HtmlWebpackPlugin配置中加入

chunks: ['manifest', 'vendor', 'app']就可以其实并没有作用

比如我访问http://localhost:4388/会跳转到http://localhost:4388/home

而我访问http://localhost:4388/home则会跳转http://localhost:4388/home/也就是他会去找home目录下prerender-spa-plugin打包出来的index.html但是路由里好像没法处理这个路径所以会报错

这应该是history模式下的路由路径是假路径而prerender-spa-plugin打包后的路径是真路径导致的

但是我的尝试中没有像网友们说的那样会报404

如果把刷新后不要增加正斜杠/来实现的话是不是就可以了呢？（我的猜想是这样的并没有去继续专研了因为放弃了这个方案，服务器好像可以控制）

由于上面的第2个问题所以我们放弃了这个方案，后续的问题也没有处理了