Vite plugin to open a local-server that can be load local .js or .ts file as API
# npm
npm install --save-dev vite-plugin-api-serve
# yarn
yarn add -D vite-plugin-api-serve
# pnpm
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:
// 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 is
* `https://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
export default [
{
url: "/get-data",
method: "GET",
handle: ({ query }) => {
return {
code: 200,
msg: "msg",
data: query,
}
},
},
]// vite.config.js
import apiServe from "vite-plugin-api-serve"
export default {
// ...
plugins: [apiServe()],
}npm run devAssuming that the project runs successfully, we can initiate a network request on the '. vue' page, for example:
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:
({ body, query, method, headers }, req, res) => Record<string, any> | ErrorAlthough 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
{
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