1. The project is structured using Ant Design Pro

Proto directory, used to store proTO, proTO can be managed in a unified git, as the child git of the front and back end projects

  1. Proto generates code scripts

protogen.sh

#! /bin/bash

PROJ_ROOT="$(dirname "$(readlink "$0")")"

mkdir -p ${PROJ_ROOT}/src/grpc/server/_proto
mkdir -p ${PROJ_ROOT}/src/grpc/client/_proto

Yarn add protoc-gen-ts
# the back-end go get -u github.com/golang/protobuf/protoc-gen-go

protoc \
  -I ${PROJ_ROOT}/proto \
  --js_out=import_style=commonjs:${PROJ_ROOT}/src/grpc/client/_proto \
  --grpc-web_out=import_style=typescript,mode=grpcwebtext:${PROJ_ROOT}/src/grpc/client/_proto \
  ${PROJ_ROOT}/proto/bbcloud/*.proto

Copy the code

Add scripts to package.json to generate code

"grpc:generate": "bash protogen.sh"
Copy the code

Generated code

Js generated code that ide does not recognize very well, not easy to import, so generate ts version

Do not delete generated JS, do not delete generated JS, do not delete generated JS

The IDE already recognizes imports automatically

  1. Introduce typescript support

Install dependencies

NPM install typescript [email protected] --save-dev

// vue.config.js
const vueConfig = {
  configureWebpack: {
    resolve: { extensions: ['.ts'.'.tsx']},module: {
      rules: [{test: /\.ts$/, loader: 'ts-loader'}},// webpack plugins
Copy the code

tsconfig.json

{
  "compilerOptions": {
    "target": "es5"."module": "commonjs"."noImplicitAny": true."removeComments": true."preserveConstEnums": true."sourceMap": false
  },
  "include": ["src/**/*"]."exclude": ["node_modules"."**/*.spec.ts"]}Copy the code

You’re done

For information on how to use grpc-Web in Vue, see: juejin.cn/post/697733…

Refer to the article: blog.csdn.net/mouday/arti…