vue技巧:解决网页静态化的问题

vue技巧:解决网页静态化的问题,第1张

我们使用vuecli打包出来的vue页面,只有一个html。不错这确实是spa牛逼的地方。 但是对于seo来说,这也是一个致命缺陷。 那就是,完全没法seo。这货连个实体页面都没有。那就很难受了。 此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入 这里你需要注意一点,你现在需要设置你的route为history模式。当然我们一直是这个模式,之前有人使用hash模式,那个是不可取的。 接着打开webpack.prod.conf.js这个文件在build文件夹中,添加 然后还是这个文件,找到plugins,在里面加入 注意着里面的地址,是生成静态化以后的目录,这里跟你的route地址是对应的。按照你的route来写。 然后重新输入 完成后是这样的 这只是一个治标不治本的解决办法!因为只有route中的页面被生成了静态页面,我们的内容页面是无法生成静态的。那么这该怎么办呢?如果你既想使用vue那简介的语法进行开发,又希望项目能实现cms那样自动生成静态的功能,你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发! 请持续关注龙哥的后续教程!

适用于vue的SEO优化方案,以下几种:

(1)ssr,即单页面后台渲染

(2)vue-meta-info 与prerender-spa-plugin 预渲染

(3)nuxt

(4)phantomjs


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/713602.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-08-07
下一篇2023-08-07

发表评论

登录后才能评论

评论列表(0条)

    保存