使用Nuxt重构已有Vue项目(Axios默认根域名、切换Vuetify字体、配置Mavon编辑器和常见异常解决localStorage/window/document is not defined)

近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好
因此用Nuxt重构了该项目 对项目进行了一次优化
由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下

一、概念

什么是Nuxt

Nuxt.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR)

Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名

对于公司内部网站等不需要排名的网站 可以不用SEO
但对于那些博客或新闻网之类的网站 SEO可谓是至关重要 这直接关系到网站的流量

二、安装

关于Nuxt的安装 这里就不多赘述了 请参看我的另一篇博客：Nuxt的介绍及简单安装(vue-cli4.x)
Nuxt是开箱即用的模块化安装 安装是傻瓜式的 非常方便

三、改造

这是Vue项目的目录结构：

这是Nuxt项目的目录结构：

可以看出 Vue和Nuxt的项目目录是很相似的 因此可以很方便地对文件进行移植
关于Nuxt的目录结构的对应含义 我在此前的博客中已经有了相关的解答：Nuxt的目录结构和常用配置

那么 接下来就是愉快的移植了：

• 【★】 Vue项目下的assets是静态文件 可以放入Nuxt项目下的static目录下
• 【★】 Vue项目下的components是组件 直接放入Nuxt项目下的同名目录components下
• 【★】 Nuxt项目下的layouts是布局文件 其中默认生成的default.vue是页面模板 相当于Vue项目下的App.vue
  里面有个<nuxt />代表了你的页面内容 相当于Vue的<router-view/> 在其上加上tabbar 在其下加上footer即可实现页面自定义页面模板
  error.vue是错误页面 这些都可以自己进行定制
• 【★】 Vue项目的路由配置router/index.js就不需要了 因为Nuxt会自动生成 不过需要遵循Nuxt的相应的规则：Nuxt的路由(普通路由、动态路由、参数校验)和路由动画
• 【★】 Vue项目的插件放在Nuxt项目的plugins目录下 给每个插件定义一个js文件进行配置
  例如过滤器 在plugins下定义一个filter.js即可：

import Vue from 'vue'
import Moment from 'moment'
Vue.filter('dateFormat',function(value,format='YYYY-MM-DD HH:mm:ss'){
   
    return Moment(value).format(format)
})

然后在nuxt.config.js里进行配置
忘了说了：nuxt.config.js是Nuxt项目的总配置文件 插件要在里面的plugins里导入才会生效
就比如刚才的过滤器：

plugins: [
    "~/plugins/filter.js",
  ],

(~和@是Nuxt的语法 都能表示项目的根目录)

• 【★】 Vue项目下的store是Vuex的配置文件 直接放于Nuxt项目的同名store目录下 但有少许不同：
  在Vue项目下的store/index.js是这样的：