Vue SSR Nuxt

概况

服务器端渲染(Server-Side Rendering)：Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。
服务器渲染的Vue.js应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

FrontFrame

大航海 >>

Vue SSR Nuxt axios封装

安装

1
$ npm install axios --save

使用

~/nuxt.config.js

引入插件，启动中间件

1
plugins: ['~/plugins/api.js'],

~/plugins/api.js

1
2
3
4
5
import Vue from 'vue'
import API from '~/api/index.js'
Vue.prototype.$API = API
Vue.use(API)

~/api/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * api接口统一管理
 * import API from 'API'
 * Vue.prototype.$API = API
 * Vue.use(API)
 *
 * this.$API.Login()
 */
import {get, post} from './http'
export default {
  POST (link) {
    return post(link)
  },
  GET (link) {
    return get(link)
  }
}

~/api/http.js

创建本地语言库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import axios from 'axios' // 引入axios
import qs from 'qs' // 引入qs模块，用来序列化post类型的数据，后面会提到
import {
  baseUrl
} from './env.js'
const TOKEN = '7bf2b13020e1ed2278db4bba3f5e7a53102cbc37'
// vuex
// import * as Tool from 'UTIL/vuex'
// axios 配置
axios.defaults.timeout = 5000 // 设置请求超时
axios.defaults.baseURL = baseUrl // 默认请求地址
axios.defaults.headers.common['Authorization'] = `token ${TOKEN}` // Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求头的设置
// 请求
axios.interceptors.request.use((config) => {
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)
  }
  let URL = config.url.split(config.baseURL)
  // Tool.open(URL[1], config.showLoading)
  return config
}, (error) => {
  // Tool.toast('错误的传参', 'fail')
  return Promise.reject(error)
})
// 返回
axios.interceptors.response.use((res) => {
  // console.log(res)
  // 拦截器配置
  // if (res.data.success) {
  //   Tool.toast(res.data.msg)
  //   Tool.close()
  //   return Promise.reject(res)
  // }
  // Tool.close()
  // return res // 全部数据
  return res.data // data数据
}, (error) => {
  // 请求失败
  // Tool.toast('网络异常', 'fail')
  // Tool.close()
  return Promise.reject(error)
})
export const get = (url, showLoading) => axios.get(url, {
  showLoading: showLoading
})
export const post = (url, params, showLoading) => axios.post(url, params, {
  showLoading: showLoading
})

~/api/env.js

更加不同页面添加不用的语言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * 配置编译环境和线上环境之间的切换
 *
 * baseUrl: 域名地址
 * routerMode: 路由模式
 * imgBaseUrl: 图片所在域名地址
 *
 */
let baseUrl
let routerMode
const imgBaseUrl = 'https://fuss10.elemecdn.com'
if (process.env.NODE_ENV === 'development') {
  baseUrl = 'https://api.github.com/'
  routerMode = 'hash'
} else {
  baseUrl = 'https://api.github.com/'
  routerMode = 'hash'
}
export {
  baseUrl,
  routerMode,
  imgBaseUrl
}

~/store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Locale from '~/locales'
export const state = () => ({
  locales: Locale(),
  locale: Locale()[0]
})
export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
	  	console.log(locale)
      state.locale = locale
    }
  }
}

方法

POST

1
2
3
this.$API.POST('').then((res) => {
  console.log(res)
})

GET

1
2
3
this.$API.GET('').then((res) => {
  console.log(res)
})
FrontFrame

如何将 Nuxt 应用部署至 Heroku？

服务器端渲染(Server-Side Rendering)：Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。
服务器渲染的Vue.js应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

FrontFrame

大航海 >>

Vue SSR

服务器端渲染(Server-Side Rendering)：
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

#

FrontFrame

大航海 >>

前端网站SEO执行策略

SEO （ Search Engine Optimization ）搜索引擎优化在搜索引擎时代对于网站来讲意义重大。一个网站，不管是小站还是大站，都离不开搜索引擎的流量导入，所以，做好 SEO 一直都是网站站长\开发者一门重要的功课。
SEO

大航海 >>

移动端调试

随着移动设备的普及以及微信庞大的用户量，移动端的需求也随之爆发式增长，平时我们使用 Chrome 进行手机模拟页面开发，但模拟终究是模拟，不可避免的还是需要真机调试，下面就来讲讲几种调试方案，希望能对你有所帮助。
Chrome

大航海 >>

上万的数据如何在前端页面快速展示？

前端要呈现百万数据，这个需求是很少见的，但是展示千条稍微复杂点的数据，这种需求还是比较常见，只要内存够，javascript 肯定是吃得消的，计算几千上万条数据，js 效率根本不在话下，但是 DOM 的渲染浏览器扛不住，CPU 稍微搓点的电脑必然会卡爆。
首先，这种情况很少见。如果要在前端呈现大量的数据，一般的策略就是分页。虽然这么说，但是如果展示上百条数据，图片资源消耗，也会让页面发生卡顿。

JavaScript

大航海 >>

,