Nuxt.js重构Vue项目 解决SEO问题

原项目是一个个人网站，直接用Vue框架写的，前后分离封装性好利于维护，但是Vue SPA单页面应用对SEO不友好，因为它页面全是js没有html页面爬虫根本爬不到，对于新手来说服务器ssr渲染比较吃力，推荐选择Nuxt.js，这里记录一下学习过程，也给新手宝宝们一个真“新手”教程，第一次写教程多多指教，老手直接看官方文档啦zh.nuxtjs.org
可参考项目github

从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。

上面这段是Vue官方给出的服务器渲染的一种方案Nuxt.js，也有其他方案:服务器渲染 -vue.js

• 官方贴心地给出了手脚架安装

  npx create-nuxt-app 
  

  安装好之后的目录应该是这样的
  

• 编译运行
  这时候执行npm run generate就会自动打包编译生成一个dist文件夹，再进入dist文件夹执行live-server就可以启动静态网站服务看到默认渲染出来的页面啦
  

• 入口文件
  vue-cli的入口文件是app.vue，而Nuxt的入口文件则是layout/default.vue，可通过添加该文件来扩展应用的默认布局。相当于，Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置，nuxt组件即显示pages里面的vue文件

  <template>
  	<div>
  	 	<nav-header />
    			<div class="container">
      			<nuxt />
    			</div>
  		<nav-footer />
  	</div>
  </template>
  

• assets和static
  资源目录assets用于组织未编译的静态资源如LESS、SASS 或 JavaScript。如果是全局样式，则可以直接在nuxt.config.json里面设置，同理可以设置其他的全局文件

  /*
  ** Global CSS
  */
  css: [
    '@assets/reset.css'
  ]
  

  静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
  举个例子:/static/robots.txt映射至 /robots.txt
  在页面里面引入文件时要注意路径的写法

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

• 引入插件
  如果要使用UI框架，比如我用了bootstrap，只需要准备好jquery和 bootstraps放到static目录，然后在nuxt.config.json里面引用即可，也可以选择直接用npm安装

  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/logo.svg' }
    ],
    script: [
      { src: '/lib/jquery.min.js' },
      { src: '/lib/bootstrap/js/bootstrap.min.js' }, //默认‘/’是指static目录下
    ]
  },
  

• components和pages
  这两个目录和Vue框架的作用一样，用来放组件和页面的文件，唯一的不同在于Nuxt不需要自己写router.js文件配置路由。个人感觉Nuxt.js比Vue对新手更加友好，目录结构和作用都非常清晰。 路由

这是我的项目目录结构、dist目录结构和最终渲染出来的页面

• 异步加载数据

  asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。官方文档：异步数据

  有两种方法可以选择
  1.返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置 组 件的数据，从而渲染组件.
  2.使用 async 或 await
  我这里选择用await

  data() {
    return {
      article: ""
    };
  },
  async asyncData () {
      const articles = await axios.get("https://service-neh664ng-1301593316.gz.apigw.tencentcs.com/release/book");
      return {
        article: articles.data[0].content
      }
  }
  

• 动态路由
  
  这样的目录结构也就相当于定义了这样的路由/article/investment/:id

  遇到的坑

  • 样式问题
    有时候加了scoped之后会出现被bootstrap的样式覆盖的情况，把scoped去掉就行了，更好的方法是在样式里面加重权重。

  • 路由跳转问题

    正常跳转加载一次，但是当前页刷新时加载两次

    经过分析发现其实是界面上面有发送undefined请求，比如图片没请求到，其实就意味着页面上面任何一个地方发生undefined就会导致页面重新请求