vite vue/react使用pont-engine

pont-engine

是一款阿里的api生成工具！

安装依赖即可

yarn add --dev pont-engine

然后即可使用

pont start

生成之后，在入口文件导入生成的index即可，一般是

import '@/services'

问题1

注意 生成的配置文件pont-config后一定要添originType、surrounding两个属性，否则生成的不全。

一般完整如下

{
  "originUrl": "http://localhost:8080/v3/api-docs",
  "templatePath": "./pontTemplate",
  "outDir": "./src/services",
  "mocks": {
    "enable": false
  },
  "templateType": "fetch",
  "originType": "SwaggerV3",
  "surrounding":"javaScript"
}

问题2

但是因为默认生成的代码 包含cjs的模块语法，所以vite无法识别。

另外生成代码前最好把旧的生成目录删除！

解决办法： 删除或更改 pontCore.js 文件里的cjs语法为esm即可。

如果您觉得麻烦，我做了如下优化，让您一键执行这些操作 并生成适应vite的代码：

在项目根目录下创建脚本命令 shell\gen-api.js

const shell = require('shelljs');
const child_process = require('node:child_process');

// 移除旧的services目录
shell.rm('-rf', 'src/services');
// 执行生成api目录(shell目前不支持exec需要交互式输入的运行命令，所以只能用原生 https://github.com/shelljs/shelljs/wiki/FAQ#running-interactive-programs-with-exec)
child_process.execSync('pont start',{stdio: 'inherit'});
// 替换生成文件里vite不支持的语法
const pontCorePath = './src/services/pontCore.js';
shell.sed('-i', 'Object.defineProperty.*', '', pontCorePath);
shell.sed('-i', 'exports.PontCore = void 0;', '', pontCorePath);
shell.sed('-i', 'exports.PontCore', 'export const PontCore', pontCorePath);

pa中添加一键打包命令

"scripts": {
  "pont": "node ./shell/gen-api.js",
   ...
},

注意 脚本依赖一个三方包 shelljs，记得安装一下

yarn add shelljs

使用

npm run pont

问题3

结合axios。

默认提供了两种ajax方式，但我们最常用的是axios。

新建一个配置文件如base-api.js

import axios from 'axios';
import {PontCore} from '@/services/pontCore'

axios.defaults.baseURL = '/api'
// axios响应拦截（axios返回本身会多一层data，这里帮忙解构出实际返回的data，避免页面取值的时候存在res.data.data难看的情况）
axios.interceptors.response.use(
  (response: any) => {
    if (response.data.code === 0) {
      return Promise.resolve(response.data);
    } else {
      message.error(response.data.msg);
      return Promise.resolve(response);
    }
  },
  (error) => {
    message.error("请求接口失败，请联系管理员");
  }
);
PontCore.useFetch((url, fetchOption) => {
  fetchOption.data = fetchOption.body
  return axios(url, fetchOption);
});

然后引入入口文件即可

import '@/utils/base-api'