nuxt.js探究

为什么使用nuxt.js?
vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于
id为app的DOM元素上，这样会存在两大问题。
1、由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。
2、由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。
Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。
1、使用 starter 模板
这里项目初始化，直接使用官网的Nuxt提供的starter的模板

# 安装 vue-cli
npm install -g vue-cli
# 初始化项目
vue init nuxt-community/starter-template nuxt-ssr-demo
# 安装依赖
cd nuxt-ssr-demo
npm install # Or yarn install
# 启动本地服务
npm run dev

访问 http://localhost:3000 ，现在我们来看下初始化好的项目目录

├── assets                      css，图片等资源都在这
├── components                  组件相关
├── layouts                     路由布局
├── middleware                  中间件
├── pages                       路由页面
├── static                      静态资源
├── pages                       路由页面
├── store                       vuex 相关
├── nuxt.config.js              nuxt 相关配置
├── package.json                依赖相关
├── README.md                   项目介绍

注释：为什么没有 router 路由相关的文件？莫慌，Nuxt 会帮你将 pages 下面的文件自动解析成路由。所以在接下来的开发中，记得别瞎在 pages 下面新增文件，pages 下面的每一个 vue 文件就是一个路由。
2、封装axios
首先在根目录下面新建 service 目录，在其下面建立 config.js 和 index.js 两个文件，下面的代码仅供参考，如果你的项目还需要做额外的一些配置，可自行进行拓展
config.js

import http from 'http'
import https from 'https'

export default {
  // 自定义的请求头
  headers: {
    post: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    'X-Requested-With': 'XMLHttpRequest'
  },
  // 超时设置
  timeout: 10000,
  // 跨域是否带Token
  withCredentials: true,
  // 响应的数据格式 json / blob /document /arraybuffer / text / stream
  responseType: 'json',
  // 用于node.js
  httpAgent: new http.Agent({
    keepAlive: true
  }),
  httpsAgent: new https.Agent({
    keepAlive: true
  })
}

index.js

import axios from 'axios'
import qs from 'qs'
import config from './config'

const service = axios.create(config)

// POST 传参序列化
service.interceptors.request.use(
  config => {
    if (config.method === 'post') config.data = qs.stringify(config.data)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 返回结果处理
service.interceptors.response.use(
  res => {
    return res.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default {
  // post 方法
  post (url, data) {
    console.log('post request url', url)
    return service({
      method: 'post',
      url,
      params: data
    })
  },
  // get 方法
  get (url, data) {
    console.log('get request url', url)
    return service({
      method: 'get',
      url,
      params: data
    })
  },
  // delete 方法
  delete (url, data) {
    console.log('delete request url', url)
    return service({
      methods: 'delete',
      url,
      params: data
    })
  }
}

跨域的处理：
vue中可以处理跨域 webpack中的proxyTable，但是在Nuxt中没有proxyTable这个东西，但是可以用直接通过配置 http-proxy-middleware 来处理跨域。更幸运的是 Nuxt 官方提供了两个包来处理 axios 跨域问题。

@nuxtjs/axios
@nuxtjs/proxy
安装下依赖

npm i @nuxtjs/axios @nuxtjs/proxy -D

然后在 nuxt.config.js 文件里进行配置

modules: [
  '@nuxtjs/axios'
],
axios: {
  proxy: true
},
proxy: {
  '/api': {
    target: 'xxx.target.com',
    pathRewrite: { '^/api': '' }
  }
}

需要注意的，因为是服务器端渲染，我的是判断是路由跳转还是axios请求，所以：

// 判断是路由跳转还是 axios 请求
if (process.server) {
  config.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
}

未完待续.....

最后编辑于：2020.05.26 14:18:43