nuxt项目项目搭建以及自动化打包部署七牛云

vue项目处理seo问题目前主流的方案有两种
一： 预渲染 prerender-spa-plugin
相关链接附上https://www.cnblogs.com/binmengxue/p/12718789.html、
本人也亲测过该种方案，确实能优化seo，能生成相应自己配置的静态文件。但是该方案不是seo问题的最优方案。推荐nuxt，利用ssr来处理seo问题。
二：nuxt.js
官网：https://www.nuxtjs.cn/guide
关于ssr不做过多介绍，自行百度。nuxt是一套基于vue+webpack的框架，会vue的话上手非常快。
$ yarn create nuxt-app <项目名>
根据官网给的流程依次安装。选用了nuxt自动集成的axios以及router（路由算是nuxt最特别的地方，后面介绍）。
介绍目录

nuxt项目项目搭建以及自动化打包部署七牛云

目录结构和vue项目差别不大 .nuxt文件是自动生成文件。nuxt.config.js是配置文件。
和vue项目不同之处在于项目并没有router文件。router文件是根据pages下的文件自动生成路由的。点开.nuxt.js可以看到相关的路由文件

nuxt项目项目搭建以及自动化打包部署七牛云
其它文件不做过多解释，官网也有解释。

配置axios
nuxt自己集成了axios，可以在页面直接使用this.$axios.get / post / … 记得使用异步处理，
我使用的是async - await ，其它异步亦可。接下来配置请求响应拦截，plugins文件夹下面新建axios-plugin.js文件。直接上代码

import axios from 'axios'
import { Message } from 'view-design'

axios.defaults.withCredentials = true// 跨域处理 允许携带cookie
export default function ({ $axios, redirect, req, store }) {
    //正常请求返回处理
    $axios.onRequest(config => {
        // 客户端设置token
        if (process.client) {
            console.log('当前调用客户端接口')
            if (store.state.userInfo) {
                config.headers.Authorization = 'bearer ' + store.state.userInfo.token
                config.headers.token = store.state.userInfo.token
            }
        }
        // 服务端设置token
        if (process.server) {
            console.log('当前调用服务端接口')
            if (req.headers.cookie) { 
                let parsed = decodeURIComponent(req.headers.cookie).substr(9)
                try {
                    const auth = JSON.parse(parsed)
                    config.headers.Authorization = 'bearer ' + auth.token
                    config.headers.token = auth.token
                  } catch (err) {
                    // 找不到有效的Cookie
                  }
            }
        }
    })
    // 响应处理
    $axios.onResponse(response => {
    })
    //错误请求返回处理
    $axios.onError(error => {
      const code = parseInt(error.response && error.response.status)
            switch (code) {
                //错误代码
                case 401:
                    $store.commit({
                      type: "LOGOUT"
                    });
                    Message.error("token失效，请重新登录");
                    break;
                case 403:
                    Message.error("拒绝访问");
                    break;
                case 404:
                    Message.error("请求错误,未找到该资源");
                    break;
                case 500:
                    Message.error("服务器端出错");
                    break;
                case 502:
                    Message.error("网络错误");
                    break;
                case 503:
                    Message.error("服务不可用");
                    break;
                case 504:
                    Message.error("网络超时");
                    break;
                default:
                    Message.error(error.message);
                    break;
            }
    })
  }

在nuxt.config.js文件中引入改配置

其它一些组件或者依赖都需要在nuxt.config文件中相关的位置引入配置

配置Vuex
store文件下面新建index.js 文件

nuxt需要在服务端跑接口的，所以sessionStorage以及localStorage都是拿不到值的，需要找替代方案。我选用的是js-cookie 具体去看文档，
const strict = false 设置严格模式（一定要设置）不然会出现一些问题。

router 介绍
nuxt中的路由都是根据pages下文件自动生成， 所以页面路由规范建议遵循官网来写。
官方推荐的路由跳转是 本质和 router-link 是一样的。可能也会存在有某些坑，我就没去踩了，老实跟着官网文档来，但是在页面中使用router-link也是可以的，因为用户操作的时候是访问的浏览器，浏览器是可以识别的，包括router.push这类的都是可以正常使用的。

<div v-for="(item,index) in list" :key=“index”>
<nuxt-link :to=“item.href”></nuxt-link>
</div>
<nuxt-child keep-alive></nuxt-child>

nuxt-child子路由命名规范需要按照官方来规范写，不然是不能自动生成相关的子路由。

其它一些特性
关于页面中的title、meta、description、keywords都是可以直接写在页面中的

自动化打包部署
nuxt自动配置了yarn run build进行打包，生成文件在.nuxt中的dist文件夹内，一个服务端一个浏览器端。
自动部署七牛云：https://www.icode9.com/content-4-168548.html