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'