记 vue (nuxt.js) 的seo优化

一、序言

众所周知，vue 是传统的spa应用 对于SEO优化可以说是一团糟，不过好在有啥问题就有解决的问题的办法（把提出问题的人....）

Vue 官方给出有ssr渲染 基于node环境，， 不过有谁愿意从头开始写呢？ 所以咱用的还是用已经封装好的Vue通用框架 Nuxt.js 开箱即用，还支持Vuex，无需写路由，文件即路由，使用无残留，就是这么顺滑

二、安装

再好的工具也是需要安装的不是？可是如何安装呢？

下载 node/npm

然后再终端输入 npx create-nuxt-app demo 即可创建一个nuxt项目了

npx 最新版npm 都自带哦

创建过程会让你选择 ui组件 服务端框架 是否开启ESLine 代码规范检查

我来一把梭 Elementui Express ESLine开启

漫长的创建过程之后 只需要进入应用目录 输入 npm run dev即可访问

编写代码与vue差不多， nuxt在vue基础上增加了几个钩子函数

validate -> 验证路由/数据

head -> 预渲染html头部标签

asyncData -> 获取数据

layout 等等 具体看官方文档 https://zh.nuxtjs.org/api/

三、配置文件

nuxt与vue的配置方法不一样， nuxt 在项目根目录下有个 nuxt.config.js

在这里面可以 引入全局 css,js等静态资源文件，也可以引入第三方扩展，设置个别扩展是否启用ssr渲染，路由守卫等等都可以在这里面编写

例子如下

  /*
  ** Headers of the page
  */
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 || '' }
    ],
    script: [
      {src: 'https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js'},
      { src: '/js/main.js', ssr: false },
      {src: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'},
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {href: 'https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css', rel: 'stylesheet', type: 'text/css'},
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '@/static/css/index.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    {src: '~/plugins/element-ui.js'},
    {src: '@/plugins/modules/modules', ssr: false},
  ],

四、axios请求

async asyncData(self) {
      let item = await Promise.all([
        self.$axios.request({
         	url: '',
        	method: 'get',
        	params: data
        })
      ])

      return {
        items: item // 对应的 data 方法里面的数据
      }
},

data() {
    return {
        items: []
    }
}

created() {
    console.log(this.items)
}

五、部分坑

nuxt的 head、asyncData 方法 里面使用window服务端会报错 created使用window 会是 null

解决办法

if (process.client){
    console.log(window)
}

待踩坑中...