vue SEO 使用预加载遇到的巨坑(被坑哭了)
2019-08-15 本文已影响0人
风飞燕
我项目快完了的时候,上帝让作seo,然后用了这个 prerender-spa-plugin
然鹅,百度上人人都说成功了的方法,我已用就遇到坑了,将静态页面转化为html之后刷新就会变成下面这个样子
巨坑.png
我先描述下问题,问题一,router中mode:history之后,在ngnix的server下配置了这个
location / {
root C:\Users\Administrator\Desktop\enassHtml;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
嗯~ o( ̄▽ ̄)o,这个在没有做seo的时候是木有问题的,但是用了之后的结果是很感人的,百度出来的结果都是,你选择打包的静态界面,打包之后dist文件夹里面有你需要打包的文件夹然后里面有一个html文件,如'/serviceHome',打包之后的路径是dist->serviceHome->index.html
之后绝望降临,更新服务器,你可以看到他成功实现了,但是你一刷新,立马出现如上问题。一个是多了一个斜线,一个是js,css没有加载,能力有限,针对于第二个问题找到了一种很lou的解法,退出来给实在没有办法的人一个参考
正确的路径
正确.png
这里可以看出是路径的问题,然后没有找到有效,简单的解决方法
目前的方法是修改打包的文件里面如serviceHome这个的html中相关的路径
啊,其他好的解决方法留给广大网有吧,
然后我最终的解决方式是弃用子路由,使用组件的方式,我的页面是有几个界面的切换的,之前我用v-if来进行展示,然后发现只有第一块的能展示出来,然后使用display:none,然后能用了(感觉我的方法只是用我的项目),最后,希望有大神能看到这个问题,帮忙解决一下,非常感谢