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

我们在上一篇博文中介绍了vue项目不被百度收录的根源和介绍了两种解决方案也具体说了预渲染的使用方法，今天说一下另一种解决方案Nuxt.js的使用。

---

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

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

---

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

• Nuxt.js 是一个基于 Vue.js 的通用应用框架。
• 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染
• 我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。
• Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
• 除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
• 我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。
• 作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

Nuxt.js安装

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

npx create-nuxt-app <项目名>

或者用yarn ：

yarn create nuxt-app <项目名>

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

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

cd <项目目录>
npm run dev

应用现在运行在 http://localhost:3000 上运行。

---

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

---

说下路由配置问题：

• Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

• 假设 pages 的目录结构如下：

pages/
--| user/
-----| site.vue
--| home/
-----| blogs.vue

那么所对应的页面路由就是：http://localhost:3000/user/site  和  http://localhost:3000/home/blogs

---

剩余API和方法文档具体查阅：Nuxt.js中文文档

---

预渲染具体使用方法：vue项目不被百度收录、seo优化问题之预渲染

---

总结

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

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

• 多使用语义化标签，用header，section、footer把区域模块都划分清楚，这样也有利于蜘蛛爬取
• 多使用h标签，尤其是h1，蜘蛛会认为你这是重要文案
• 经常维护自己的代码，多优化

---

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~