protobuf.load("awesome.proto", function(err, root) {...})
protobuf.load("awesome.json", function(err, root) {...})

// /api/student.js 定義接口的文件
import request from '@/lib/request'

// params是object類型的請求參數(shù)
// school.PBStudentListReq 是定義好的請求體model
// school.PBStudentListRsp 是定義好的響應(yīng)model
// getStudentList 是接口名稱
export function getStudentList (params) {
 const req = request.create('school.PBStudentListReq', params)
 return request('getStudentList', req, 'school.PBStudentListRsp')
}

// 在HelloWorld.vue中使用
import { getStudentList } from '@/api/student'
export default {
 name: 'HelloWorld',
 created () {

 },
 methods: {
 _getStudentList () {
  const req = {
  limit = 20,
  offset = 0
  }
  getStudentList(req).then((res) => {
  console.log(res)
  }).catch((res) => {
  console.error(res)
  })
 }
 }
}

// User.proto
package framework;
syntax = "proto3";

message PBUser {
 uint64 user_id = 0;
 string name = 1;
 string mobile = 2;
}

// Class.proto
package school;
syntax = "proto3";

message PBClass {
 uint64 classId = 0;
 string name = 1;
}

// Student.proto
package school;
syntax = "proto3";

import "User.proto";
import "Class.proto";

message PBStudent {
 uint64 studentId = 0;
 PBUser user = 1;
 PBClass class = 2;
 PBStudentDegree degree = 3;
}

enum PBStudentDegree {
 PRIMARY = 0; // 小學生
 MIDDLE = 1; // 中學生
 SENIOR = 2; // 高中生
 COLLEGE = 3; // 大學生
}

message PBStudentListReq {
 uint32 offset = 1;
 uint32 limit = 2;
}

message PBStudentListRsp {
 repeated PBStudent list = 1;
}


// MessageType.proto
package framework;
syntax = "proto3";
// 公共請求體
message PBMessageRequest {
 uint32 type = 1;       // 消息類型
 bytes messageData = 2;      // 請求數(shù)據(jù)
 uint64 timestamp = 3;      // 客戶端時間戳
 string version = 4;       // api版本號

 string token = 14;       // 用戶登錄后服務(wù)器返回的 token，用于登錄校驗
}

// 消息響應(yīng)包
message PBMessageResponse {
 uint32 type = 3;       // 消息類型
 bytes messageData = 4;      // 返回數(shù)據(jù)

 uint32 resultCode = 6;      // 返回的結(jié)果碼
 string resultInfo = 7;      // 返回的結(jié)果消息提示文本（用于錯誤提示）
}
// 所有的接口
enum PBMessageType {
 // 學生相關(guān)
 getStudentList = 0;       // 獲取所有學生的列表, PBStudentListReq => PBStudentListRsp
}

# vue create vue-protobuf
# npm install axios protobufjs --save-dev

npx pbjs -t json src/proto/*.proto > src/proto/proto.json

npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto

"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint",
 "proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto"
 },

import axios from 'axios'
const httpService = axios.create({
 timeout: 45000,
 method: 'post',
 headers: {
 'X-Requested-With': 'XMLHttpRequest',
 'Content-Type': 'application/octet-stream'
 },
 responseType: 'arraybuffer'
})

import protoRoot from '@/proto/proto'
import protobuf from 'protobufjs'
// 請求體message
const PBMessageRequest = protoRoot.lookup('framework.PBMessageRequest')
// 響應(yīng)體的message
const PBMessageResponse = protoRoot.lookup('framework.PBMessageResponse')
const apiVersion = '1.0.0'
const token = 'my_token'
function getMessageTypeValue(msgType) {
 const PBMessageType = protoRoot.lookup('framework.PBMessageType')
 const ret = PBMessageType.values[msgType]
 return ret
}
/**
 * 
 * @param {*} msgType 接口名稱
 * @param {*} requestBody 請求體參數(shù)
 * @param {*} responseType 返回值
 */
function request(msgType, requestBody, responseType) { 
 // 得到api的枚舉值
 const _msgType = getMessageTypeValue(msgType)
 // 請求需要的數(shù)據(jù)
 const reqData = {
 timeStamp: new Date().getTime(),
 type: _msgType,
 version: apiVersion,
 messageData: requestBody,
 token: token
 }
}
 // 將對象序列化成請求體實例
 const req = PBMessageRequest.create(reqData)
 // 調(diào)用axios發(fā)起請求
 // 這里用到axios的配置項：transformRequest和transformResponse
 // transformRequest 發(fā)起請求時，調(diào)用transformRequest方法，目的是將req轉(zhuǎn)換成二進制
 // transformResponse 對返回的數(shù)據(jù)進行處理，目的是將二進制轉(zhuǎn)換成真正的json數(shù)據(jù)
 return httpService.post('/api', req, {
 transformRequest,
 transformResponse: transformResponseFactory(responseType)
 }).then(({data, status}) => {
 // 對請求做處理
 if (status !== 200) {
  const err = new Error('服務(wù)器異常')
  throw err
 }
 console.log(data)
 },(err) => {
 throw err
 })
}
// 將請求數(shù)據(jù)encode成二進制，encode是proto.js提供的方法
function transformRequest(data) {
 return PBMessageRequest.encode(data).finish()
}
function isArrayBuffer (obj) {
 return Object.prototype.toString.call(obj) === '[object ArrayBuffer]'
}
function transformResponseFactory(responseType) {
 return function transformResponse(rawResponse) {
 // 判斷response是否是arrayBuffer
 if (rawResponse == null || !isArrayBuffer(rawResponse)) {
  return rawResponse
 }
 try {
  const buf = protobuf.util.newBuffer(rawResponse)
  // decode響應(yīng)體
  const decodedResponse = PBMessageResponse.decode(buf)
  if (decodedResponse.messageData && responseType) {
  const model = protoRoot.lookup(responseType)
  decodedResponse.messageData = model.decode(decodedResponse.messageData)
  }
  return decodedResponse
 } catch (err) {
  return err
 }
 }
}
// 在request下添加一個方法，方便用于處理請求參數(shù)
request.create = function (protoName, obj) {
 const pbConstruct = protoRoot.lookup(protoName)
 return pbConstruct.encode(obj).finish()
}
// 將模塊暴露出去
export default request

import request from '@/lib/request'
// params是object類型的請求參數(shù)
// school.PBStudentListReq 是定義好的請求體model
// school.PBStudentListRsp 是定義好的響應(yīng)model
// getStudentList 是接口名稱
export function getStudentList (params) {
 const req = request.create('PBStudentListReq', params)
 return request('getStudentList', req, 'school.PBStudentListRsp')
}
// 后面如果再添加接口直接以此類推
export function getStudentById (id) {
 // const req = ...
 // return request(...)
}

<template>
 <div class="hello">
 <button @click="_getStudentList">獲取學生列表</button>
 </div>
</template>
<script>
import { getStudentList } from '@/api/student'
export default {
 name: 'HelloWorld',
 methods: {
 _getStudentList () {
  const req = {
  limit: 20,
  offset: 0
  }
  getStudentList(req).then((res) => {
  console.log(res)
  }).catch((res) => {
  console.error(res)
  })
 }
 },
 created () {
 }
}
</script>
<style lang="scss">
</style>