vue中如何进行seo之Nuxt.js使用

1.seo方法一： 预渲染

第一步下载插件 prerender-spa-plugin
   npm install prerender-spa-plugin

第二步：在vue.config.js文件中引入并进行配置
vue.config.js:
    const PrerenderSPAPlugin = require('prerender-spa-plugin');
    module.exports = {
       publicPath: './', // 打包文件路径
       configureWebpack: {
          plugins: [
             new PrerenderSPAPlugin({
               staticDir: path.join(__dirname, 'dist'),
               routes: [
                 '/',
                 '/路由path即可',
                 '例如: /home',
               ]
             })
          ]
       }
    }

2. seo方法二：修改title描述关键词  vue-meta-info

第一步：下载插件
   npm install vue-meta-info -S
第二步：到页面组件中配置
export default {
   metaInfo: {
     title: 'xxx',
     meta: [{
       name: 'xxx',
       content: 'xxx'
     }]
   }
 }

存在问题：
    1.预渲染无法配置动态路由；
    2.无法动态给title赋值；

可以解决问题：
    1.打包多页面；
    2.可以解决每个页面单独生成title描述关键词
    3.接口数据在html生成之前放在页面上，可以抓取数据。

2.服务端渲染 - SSR/Nuxt.js

 需要开启一个node的服务，使用 vue-server-render 插件，把vue项目的内容动态渲染成要给html文档，返回给浏览器，达到了服务器
渲染的目的。

3.Nuxt.js

   3.1 下载安装nuxt.js

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：
可以使用 npx -v 查看是否已安装。

创建项目：
    npx create-nuxt-app 项目名称
    #or
    yarn create nuxt-app 项目名称

    3.2Nuxt.js目录结构及安装过程选项

安装过程中的选项：
　　programming language: 程序设计语言
　　Package manager：包管理器
　　UI framework: ui 框架
　　Nuxt.js modules: nuxt的js模块
　　Linting tools: 代码校验工具
　　Testing Framework: 测试框架
　　Rendering modules: 渲染模式
　　Deployment target: 部署目标
　　Development tools: 开发工具
　　Version control system: 版本控制工具

目录结构：
   pages: 存放页面
   components: 存放组件
   static：存放静态资源
   store：vuex状态树
   nuxt.config.js: 全局配置文件

    3.3服务端生命周期

1. nuxtServerInit( store, context ) {

   　　store: vuex上下文；
   　　context: nuxt上下文；
   　　全局的

   }


2.middleware(store, route, redirect, params, query, req, res ){
    // 可以在这个生命周期中可以路由拦截等
  }
  2.1全局
     nuxt.config.s进行配置：
       router:{
         middleware: '名称'
       }
     新建middleware目录 => 名称.js

  2.2页面
     <script>
        export default {
           middleware: 'auth'
        }
        新建middleware目录=> auth.js
        #or
        export default {
           middleware(){},
        }
        //注意这里就可以不用新建文件了
     </script>

3.validate（{params, query}）{
    //校验传递参数是否正确
    return true;
  }

4.asyncData方法
  限于页面组件，每次加载之前被调用。所以在这里进行发起请求操作。
  <script>
     export default {
        asyncData({store,params}){
            // pages中的页面来请求数据
        }
     }
  </script>

5.fetch方法
  用于渲染页面前填充应用的状态树store数据，与asyncData方法类似，不同的是它不会
  设置组件的数据。
  fetch({app, store, params}){}

    3.4服务端和客户端共有的生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

跳转标签：
<nuxt-link :to="path"></nuxt-link>

4.路由

路由跳转方式：
    <a href="xx?id=xx">a链接</a>
    <nuxt-link :to="{name:'xx',query:{id:'xx'},params:{id:'xx'}}"></nuxt-link>
    <button @click="go">跳转</button>
    go(){
      this.$router.push('xx')
    }

5.nuxt.js如何写title，描述，关键字 => head函数

export default {
  head(){
    return {
       title:'xx',
       meta: [
         {name: 'description', content:'描述'},
         {name: 'keywords', content: '关键字'}
       ]
    }
  }
}

6.nuxt.js设置代理，解决跨域问题？

// 下载proxy
npm install @nuxtjs/proxy -S

//在 nuxt.config.js 文件中进行配置
axios: {
  proxy: true,// 是否开启跨域
},
proxy: {
  '/api': {
     target: 'xx',
   }
},
modules: [
  '@nuxtjs/proxy'
]

7.nuxt.js中的 middleware做导航守卫

// 全局导航守卫
  1.在项目根目录创建 middleware文件夹，然后再创建 auth.js文件
    // auth.js
    export default({ $axios, store, redirect }) => {
       //这里就可以根据需求来进行判断，如果没有token，跳转到login界面
       if(!store.state.token){
         redirect('/login')
       }
    }
  2.在 nuxt.config.js文件中进行配置
    router: {
      middleware: 'auth'
    }

// 局部导航守卫
  1.第一步操作跟上面全局导航守卫相同，都是先创建middleware文件夹以及auth.js文件以及逻辑判断等
  2.进入需要进行导航守卫的页面，然后进行配置即可
    例如： index.vue界面
    export default {
       data(){
         return {}
       },
       middleware: 'auth',
    }

8.nuxt.js中不能使用localStorage如何处理？

nuxt.js 如果走ssr模式的话，先走nodex.js再走客户端，
那么node.js中没有客户端的数据，例如，localstorage,window,document等。

//安装插件 cookie-universal-nuxt
npm i cookie-universal-nuxt -S

// 在nuxt.config.js文件中添加插件模块
modules: [
  'cookie-universal-nuxt'
]

//使用插件的api
例如：
   this.$cookie.set('token', 'xxx');
   this.$cookie.get('token')
   this.$cookie.remove('token')

参考文章链接：

      https://www.xuexiluxian.cn/blog?keywords=nuxt