使用 Nuxt.js实现SSR服务器端渲染之nuxt.config实战配置详解

Nuxt.js的服务器端渲染非常有利于SEO，我们也说到了服务器端渲染并不是一项新技术，但Nuxt.js可是新框架。

Nuxt.js虽然在语法上和Vue基本一致，但用法也有很多不同的地方，如果直接将Vue的方式使用到Nuxt.js上会导致无法实现服务器端渲染的情况出现。

我们简单将Nuxt.js和Vue.js做一个对比

• 打包后的输出文件

1. vue: dist
2. nuxt: .nuxt(有些编译器默认不显示 点文件)

• 页面渲染方式

1. vue:客户端渲染，虚拟DOM ，通过ajax方式实现
2. nuxt: 服务器端渲染，在服务器端完成页面组装，可实现页面静态化。

• 部属方式

1. Vue:只需要部属打包后文件既dist到服务器即可，不自带服务器，需要使用Ngix或者其方式做web服务器.
2. Nuxt:除node_modules，.git外需要部署几乎所有文件到服务器，自带服务端，需要pm2管理（部署时需要reload pm2），需要nginx做代理.

• 项目入口

1. vue: /src/main.js ，在main.js可以做一些全局注册的初始化工作
2. nuxt:没有入口文件，通过nuxt.config.js来进行指定配置

• 路由实现方式：

1. vue:自己在router中编写路由
2. nuxt:依据 pages 目录结构自动生成 vue-router 模块的路由配置。

接下来我们完成一个项目的搭建：

nuxt很贴心的为大家准备的脚手架：

npx create-nuxt-app <项目名>

接下来会让你选择一系列的配置：常见的配置是 服务器端用express或者koa, 数据获取选择axios,如果选了axios，则会帮你在nuxt实例下注册 $axios ，让你可以在.vue文件中直接 this.$axios 发起请求。

nuxt提供了nuxt.config.js来配置我们的开发环境，并默认的配置涵盖了大部分使用情况。

我们重点聊聊nuxt.config.js 的配置，其他的以后详细讲解。

模式为通用模式：

 mode: 'universal'

head用来设置页面头部可以多放一些文案供爬虫抓取

 head: {
 title: 'xxxx有限公司的网站',
 meta: [{
 charset: 'utf-8'
 },
 {
 name: 'keywords',
 content: '俺们公司是干啥的，俺们公司啥都干'
 },
 {
 hid: 'description',
 name: 'description',
 content: '俺们公司是干啥的，俺们公司啥都干！修高铁，擦核电站，捞鱼雷，抓火箭'
 }
 ],
 link: [{
 rel: 'icon',
 type: 'image/x-icon',//你们公司的的小icon在这里设置
 href: '/favicon.ico'
 }]
 },

loading样式设置，当然也可以自定义loading，如果你需要的话：

 loading: {
 color: '#29a31a',
 height:'1px',
	duration:2000
 },

css全局配置：

 css: [{
 src: '~assets/css/base.scss',
 lang: 'scss',
 },
 {
 src: 'element-ui/lib/theme-chalk/index.css'
 }
 ],

第三方插件配置：

 plugins: [
 '@/plugins/element-ui'
 ],

相应的配置完使用的话你还需要在plugins文件夹下进行调用

第三方模块库的使用

 modules: [
 '@nuxtjs/axios',
	 '@nuxtjs/proxy'
 ],

页面切换动画

 //页面切换动画
 transition:{
	 name:'page',
	 mode:'out-in'
 },

需要在公用css里放置如下代码动画才能生效：

// 全局页面切换动画
.page-enter-active, .page-leave-active {
 transition: opacity .5s;
}
.page-enter, .page-leave-active {
 opacity: 0;
}

代理端口：

 proxy: {
 '/api/': { target:'http://xxxx/api', pathRewrite: {'^/api/': ''} }
},

调用端口的时候就不用从http开始写起了，直接从/api写起。

按需引入element-ui:

 build: {
 // 按需引入element-ui
 babel: {
 plugins: [
 [ "component",
 {
 "libraryName": "element-ui",
 "styleLibraryName": "theme-chalk"},
 ]
 ]
 },
}

下次再聊。请关心我的账号，持续技术探讨，源码暴力拆解分享。