vuejs seo优化(vue项目如何做seo)

spider_120_477

<p>
   每天进步一点点...
  </p><p data-track="2">
   之前的Vue项目使用过prerender-spa-plugin&amp;vue-meta-info做seo，但对于博客类、新闻类的网站，详情页还是无法被爬取到，只能做固定的页面，今天把自己的Vue项目改造成Nuxt项目。
  </p><p data-track="68">
   效果预览：https://www.lpya.cn/
  </p><p data-track="73">
   1、首先使用以下命令安装nuxt项目
  </p><p data-track="7">
   安装时会出现类似Vue安装时出现的选项，自己根据需求选择就好
  </p><p class="pgc-img-caption">
    选项
   </p><p data-track="10">
   2、使用下面命令安装依赖并启动项目，出现下面的就说明nuxt安装成功
  </p><p class="pgc-img-caption">
    效果图
   </p><p data-track="76">
   3、项目结构对比Vue项目，两个目录结构很相似，无非Vue是在src目录下，Nuxt是在根目录
  </p><p class="pgc-img-caption">
    Vue与Nuxt结构对比
   </p><p data-track="17">
   1、main.js
  </p><p data-track="18">
   把Vue里面的main.js文件放到Nuxt根目录下，去掉new Vue({})，并在nuxt.config.js文件引入，其它不变
  </p><p data-track="22">
   2、store.js文件
  </p><p data-track="21">
   在store目录下创建index.js文件，引入后在页面直接this.$store调用
  </p><p data-track="27">
   3、组件
  </p><p data-track="25">
   1）把Vue components目录下的全部放到Nuxt components目录下就行，Nuxt的组件会自动注册，可以不使用import注册直接使用
  </p><p data-track="26">
   2）把组件复制过来后，可能会出现scss的错误（我Vue项目使用的是SCSS），使用下面命令安装
  </p><p>
   配置SCSS的全局变量
  </p><p data-track="32">
   4、路由
  </p><p data-track="31">
   把Vue views目录下的全部放到Nuxt pages目录下，文件名就是路由，值得注意的是，传参的时候和Vue有一些不同。比如我博客网站文章详情的路由是/detail，要传一个id过去，跳转链接可以写成下面这样
  </p><p class="pgc-img-caption">
    路由
   </p><p data-track="79">
   5、布局
  </p><p data-track="36">
   Nuxt可以自定义多个布局，比如说一个布局需要Header和Footer，一个布局不需要，另一个需要空白，我们可以在layouts定义布局，并在pages页面下调用即可
  </p><p data-track="40">
   6、设置网站title
  </p><p data-track="39">
   使用head()给每个页面设置title和description
  </p><p data-track="42">
   配置到这里，Vue项目基本上已经改造成Nuxt项目，但是和Vue的区别不大，详情页面还是无法被爬取到，这里我们需要使用asyncData，它可以在初始化页面前先得到数据，然后设置title。其它作用可以自己查。。。
  </p><p data-track="44">
   1、使用下面命令打包项目，会创建.nuxt目录，把下面文件放到服务器上
  </p><p class="pgc-img-caption">
    需要部署的文件
   </p><p data-track="81">
   2、使用下面命令安装依赖并运行
  </p><p class="pgc-img-caption">
    运行
   </p><p data-track="83">
   3、配置域名访问，我使用的是bt面板，找到配置文件在里面添加下面内容，使用域名就可以访问刚部署的内容了
  </p><p data-track="53">
   4、如果我们关闭终端，服务就关闭了，现在需要开户守护进程，让它在后台一直运行，创建pm2.config.json文件
  </p><p data-track="56">
   使用bd站长工具的抓取诊断，可以查看做之前和之后的一个对比。下图可以明显看出，没改之前只能抓取到固定的信息，改之后可以动态抓取到内容（重点是使用了asyncData）
  </p><p class="pgc-img-caption">
    前后对比
   </p><p data-track="59">
   Sitemap可以方便我们告诉搜索引擎网站上有哪些可供抓取的网页。
  </p><p data-track="60">
   1、使用命令安装@nuxtjs/sitemap
  </p><p>
   2、创建config目录，并在里面添加sitemap.js文件
  </p><p>
   3、在nuxt.config.js引入，部署时记得把config目录也上传服务器
  </p><p>
   4、部署后访问https://.../sitemap.xml链接就可以查看效果
  </p><p class="pgc-img-caption">
    sitemap
   </p><p data-track="67">
   虽然看起来多，实际也就几步操作，我也是第一次接触nuxt，有些地方可能弄不好或许也有更好的方法，有大神知道的可以吱一声[灵光一闪]。。。有需要的可以自己慢慢尝试，bug总会被解决的（或许[流泪]）。
  </p>

dAstJ913902

学习了，谢谢分享、、、

oQpfa176909

看帖回帖是美德！

OD7z1566740

不错，支持下楼主

XicB9566665

大佬牛逼，学习了

X1Olc771904

好好 学习了 确实不错

0AWJq681674

路过，支持一下啦

uozv9323879

好帖，来顶下

AOFxd429733

前排支持下

NBWcC294177

沙发！沙发！