单页面应用和服务端渲染-引入nuxt.js

SPA	Single Page Application	单页面应用
MPA	Mulpile Page Application	多页面应用
CSR	Client Side Render	客户端渲染
SSR	Server Side Render	服务端渲染

单页面应用SPA

从头到尾只有一个页面页面间的跳转切换使用路由切换要展示的组件

特点/优点：

SPA 所需的资源，如 HTML、CSS 和 JS 等，会在一次请求中就加载完成。所以页面切换速度快、切换视图内容时不会向服务端请求资源。减轻服务器端的压力

缺点：

压力全在客户端导致第一次打开页面时加载速度变慢、客户端渲染会频繁绘制页面，导致浏览器内存占用增加，浪费内存、

不利于 SEO 网络爬虫抓取、页面只有一行源代码

预渲染加快打开速度

npm install prerender-spa-plugin -S

vue.config.js中配置

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  publicPath:'./',
  configureWebpack:{
    plugins:[
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname,'dist'),
        routes:[
	'/',
	'/about',
	'contact'
]
})
]
}
}

vue-meta-info 包为每个页面添加 title 描述

npm install vue-meta-info -S

main.js 引用：
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

metaInfo:{
title: '页面单独设置的标题',
meta:[{
name:'关键字，web描述',
content: '描述'
}]
}

可以解决：
1.打包多个页面
2.可以解决每个页面单独生成 title 描述关键词 [vue-meta-info]
3.接口数据是在html 生成之前就放在页面上的爬虫可以抓取

存在的问题：
1.预渲染无法配置动态路由
2.如果title描述关键字来自于接口的数据配置到meta-info 也是不行的

解决seo的问题：
1.前后端不分离
压力在后端
好处：安全

2.前后端分离的
① spa 单页面应用 vue-cli本身处理不了seo
压力客户端

② 预渲染
压力客户端
一个项目不是所有的页面都做seo
问题：
1.在HTML页面加载之前数据过来渲染后才又html的dom结构，这样的话可能存在页面空白的清况
2.一个项目不是所有的页面都做seo

③服务端渲染
压力服务端（ node sever中间件）后面还有服务器
问题：起了两个服务
一个是后端自己的语言服务
一个是node 的服务

主流的解决方案服务端渲染SSR-nuxt.js

解决一个项目可能所有页面都要做SEO

安装 - NuxtJS | Nuxt.js 中文网Nuxt.js 十分简单易用。一个简单的项目只需将 `nuxt` 添加为依赖组件即可。https://www.nuxtjs.cn/guide/installation

npx create-nuxt-app <项目名>

安装过程当中的选项：

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

目录结构

pages 存放页面（自动对应router）

components 存放组件自动查找

static 静态资源

store vuex共享状态树

nuxt.config.js 全局的配置文件