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

猜你喜欢

转载自www.cnblogs.com/lichuntian/p/9004285.html