vue:移动端和PC端放在同一个项目中使用prerender-spa-plugin打包为html页面失败

——这背后究竟是哪般之新手村打工仔小徐的自我总结

1.为什么移动端和PC端放在同一个项目中?

因为移动端和PC端使用同一个域名,而且由于移动端和PC端的网页样式相差非常大,没有写成响应式网页。而是分别写了移动端和PC端两套代码放在同一个vue项目中,然后通过JS判断终端来跳转不同页面。

2.为什么使用prerender-spa-plugin将vue项目打包为html页面?

因为代码都写完了才想起来要搞传说中的SEO优化,而用vue构建的项目对搜索引擎十分不友好。上网瞅了一圈,发现此时还是用prerender-spa-plugin插件把整个vue项目打包成HTML页面比较方便。

3.打包成html页面不成功问题出在哪?

总之各个地方调试了半天,确保打包配置没有问题后,发现致命打击还是出在判断终端的JS上,只要将这段JS注释掉就可以打包成功了!
vue:移动端和PC端放在同一个项目中使用prerender-spa-plugin打包为html页面失败_第1张图片
当然劳动人民智慧多,不到万不得已不做选择题!

4.小徐是如何用白痴一样的方法解决问题的?

1.判断终端的JS我一开始是放在入口文件App.vue里的,如图:vue:移动端和PC端放在同一个项目中使用prerender-spa-plugin打包为html页面失败_第2张图片
将这段js注释掉后,我转换了几个革命根据地,发现只要是放在入口文件上都不行,App.vue、main.js、index,html一个都不行!

2.那我就退一步说话,放在进入网站之后就默认首先加载的一级路由:mainpage里,然后发现还是不行呢哈哈哈哈哈哈。

3.退一步不行那就退两步,所以最后我把它放在了二级路由:indexPage里,反正mainPage重定向到indexPage页面么,就是这么简单粗暴就好了。
路由级别如图:vue:移动端和PC端放在同一个项目中使用prerender-spa-plugin打包为html页面失败_第3张图片
vue:移动端和PC端放在同一个项目中使用prerender-spa-plugin打包为html页面失败_第4张图片4.总结:按照小徐的白痴方法来解决问题的话,把判断终端的js放在二级路由的页面上就完事儿了!

5.如果有大佬不幸路过,不许说我蠢!在心里说我也不行!

vue:移动端和PC端放在同一个项目中使用prerender-spa-plugin打包为html页面失败_第5张图片

你可能感兴趣的:(前端#vue#打包为html)