由于公司想要把商城做由之前的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