vueseo（vueseo解决方案）

本篇文章给大家谈谈vueseo，以及vueseo解决方案对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Nuxt.js的使用、vue项目不被百度收录怎么办、seo优化问题@令狐张豪
• 2、使用vue后怎么针对搜索引擎做SEO优化?
• 3、请问一个已经开发完毕的 vue 项目用预渲染方式做seo页面优化的话vue的hash路由必须改成history模式吗？
• 4、VUE(SPA)项目中使用SEO-动态生成META标签
• 5、nuxt入门教程（一）vue如何实现全站静态化？
• 6、vue技巧：解决网页静态化的问题

Nuxt.js的使用、vue项目不被百度收录怎么办、seo优化问题@令狐张豪

还不了解vue为什么不被百度收录或预渲染怎么使用的童鞋们建议点下面链接了解下

vue项目不被百度收录怎么办、seo优化问题/预渲染的具体使用

Nuxt.js介绍、Nuxt.js 是什么？：

Nuxt.js安装

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

或者用yarn ：

然后会让你进行一些安装的选择，这里就简单说下（UI框架没有就选none就行了，Eslint检测本人是非常不习惯用的所以我一般都不选，其他的没什么说的）

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

应用现在运行在 上运行。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_ 和 ~/static/your_方式。

说下路由配置问题：

总结

每个框架都有他自己对应的ssr方案，今天这里提到了vue的，有心的童鞋可以自行查阅其他框架方面的

再说几点关于seo方面的小技巧

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！

文章对您有所帮助请给作者点个赞支持下，谢谢~

使用vue后怎么针对搜索引擎做SEO优化?

适用于vue的SEO优化方案，以下几种：

（1）ssr,即单页面后台渲染

（2）vue-meta-info 与prerender-spa-plugin 预渲染

（3）nuxt

（4）phantomjs

请问一个已经开发完毕的 vue 项目用预渲染方式做seo页面优化的话vue的hash路由必须改成history模式吗？

最好是的，因为搜索引擎对于#后面的内容（锚）点一般是不收录的，改成history模式，在对页面重写就可以了~

对优化部分进行后端动态赋值

VUE(SPA)项目中使用SEO-动态生成META标签

上文中提到过这里主要使用的是 vue-meta-info ，下面来和大家说一下它的用法

大家可以选择不同的安装方式

Yarn:

NPM:

引入方式很简单，没有什么难理解的，照做就是了

使用方式的话会分为两种(接下来会举一些官网上的例子)：

    使用时注意，meta里可以写多个map，下面这个例子中只写了keyWords

这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式：

    这些配置好了之后，就可以测试一下啦，打开调试工具，点击到Elements一栏，看下head标签下是否有你刚刚生成的meta，如果有的话，那么恭喜你，你成功的征服了它

nuxt入门教程（一）vue如何实现全站静态化？

不知道你有没有发现，vue做的网站除了首页以外，其他页面根本就不能被百度收录。以至于有很多做seo的同事痛斥其种种不是，最后被强迫改为不分离开发。

至于vue的详情页为什么不能被百度收录，这就涉及到了spa的核心概念，因为数据都是异步获取来的，前端根本就没有所谓的纯静态一说。通俗点讲就是，页面都是js通过ajax获取到数据以后，动态生成的。既然它本来就没有一个文件放在服务器上，当然，爬虫也就不能获取到这个静态的url地址了。

但是url静态地址又是做seo必须的东西..

所以今天龙哥教你一套新的前端框架，基于vue的ssr前端框架—nuxt。本地开发的时候，使用vue语法，模块化你的项目，然后发布的时候生成静态，把ajax获取来的内容转化成静态html以利于seo。真正实现模块化和静态化两不误！

首先说明一下，龙哥本地的nuxt环境是2.8.1。如果你的版本号和我的不符，可能有部分语法你需要参考官方API开发手册。

使用命令：

小知识：啥是npx？

我们以前不是用的npm吗，但是这货每次安装东西的时候，你还得给全局装一个-g，相当于你电脑里老得有这个服务。

但其实你项目中已经包含了运行时候所需要得所有东西了。

如果你用了npx，他不会给你装这个东西，而是装得时候用一下，用完了就卸载，效率更高。

npx是nodejs在5.0版本以后新加入的，非常牛逼。

所以我们现在来cnpm -g 那一步都不需要了，我们直接npx创建项目即可！！！

直接输入

注意这里有可能报错，不用管他，过个几秒就安装好了。

还有一个需要注意的地方，你的git版本不能低于2.17否则后面有几个需要arrow选择得地方你可能选不了，请升级你的git版本。

然后就可以开始安装了。

等你看到这个界面，就是安装好了。

他会自动安装所需要得所有包，安装完了以后你进入localhost:3000

出现这个界面，就OK了

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

我们使用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来开发！

请持续关注龙哥的后续教程！

关于vueseo和vueseo解决方案的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。