[](https://www.npmjs.com/package/vite-plugin-api-serve)
npm install vite-plugin-api-serve
Vite plugin to open a local-server that can be load local .js or .ts file as API
``sh
npm install --save-dev vite-plugin-api-serve
yarn add -D vite-plugin-api-serve
pnpm add -D vite-plugin-api-serve
`
Create a js or ts file named 'api. config' in the root directory of the project, which should be at the same level as the vite.config.ts file.
Note: This api.config.ts supports HMR. When we modify this file and save it, the server will automatically restart to ensure that the latest configuration file can be loaded.
file content like this:
`ts
// api.config.ts
import { method, path, remote } from "vite-plugin-api-serve/decorator"
export default class DevApiController {
// static target = "http://xxx.com"
/**
* @path: request path
* @method: request method
* getData：processing function
*/
@path("/get-data")
@method("GET")
getData({ query }: any) {
return {
code: 200,
msg: "msg",
data: query,
}
}
@path("/simple-post")
@method("POST")
simplePost({ body }: any) {
return {
code: 200,
msg: "msg",
data: body,
}
}
@path("/post-json")
@method("POST")
postWithJSON({ body }: any) {
return {
code: 200,
msg: "msg",
data: body,
}
}
@path("/post-text")
@method("POST")
postWithFormData({ body }: any) {
return {
code: 200,
msg: "msg",
data: body,
}
}
/**
* @path: request path
* @method: request method
* @remote: remote server address，argment can be set ''
* getData：processing function
*
* If the 'static target=' attribute is set and the 'remote' parameter is not set, the final
* request address is http://xxx.com//users/github. otherwise, the final request address ishttps://api.github.com/users/github
*
*/
@path("/users/github")
@method("GET")
@remote("https://api.github.com")
getRemoteData() {}
@path("/post")
@method("POST")
@remote("https://httpbin.org")
getRemoteDataWithData() {}
@path("/get")
@method("GET")
@remote("https://httpbin.org")
getRemoteDataWithHeader() {}
}
`
In version v0.0.2 and below, it should be written in the following format
`js`
export default [
{
url: "/get-data",
method: "GET",
handle: ({ query }) => {
return {
code: 200,
msg: "msg",
data: query,
}
},
},
]
`js
// vite.config.js
import apiServe from "vite-plugin-api-serve"
export default {
// ...
plugins: [apiServe()],
}
`
`sh`
npm run dev
Assuming that the project runs successfully, we can initiate a network request on the '. vue' page, for example:
`js`
async function getData() {
const res = await fetch("/getProjectList")
const data = await res.json()
console.log(data.code)
}
If the 'url' and 'method' of the request can be found in the 'api. config' file, the corresponding 'handle' method will be called to process and return the result
The handle function is an important component that is called and executed when a route is matched. The complete signature of this function is as follows:
`js`
({ body, query, method, headers }, req, res) => Record
Although this method provides two objects - 'req' and 'res', but they can be ignored during development. It is better to directly use the four deconstructed objects of {body, query, method, headers}
The return value of this method can be a regular JavaScript object, which will eventually be processed into JSON and returned to the client. If you want to handle certain exceptions, you can return an Error object
`js``
{
url: "/getProjectList",
method: "POST",
handle: ({ body, query, method, headers }) => {
console.log(body)
console.log(query)
console.log(method)
console.log(headers)
return {
name: "getProjectList",
}
},
},
MIT