🚀mock-dev-server is injected into the vite development environment to simulate requests and data responses.在vite 开发环境中注入 mock-dev-server, 模拟请求和数据响应
Home Page: https://vite-plugin-mock-dev-server.netlify.app
License: MIT License
1、版本：1.0.4 ，环境： vite - 4.1.4
2、插件配置：
export function initMockDevServerPlugin() {
return mockDevServerPlugin({
prefix: 'mock',
include: 'mock/**/*.{ts,js,cjs,mjs,json,json5}',
formidableOptions: {
// 配置上传资源存放目录
uploadDir: resolve(process.cwd(), 'uploads'),
// 可修改上传资源名称
filename: (name, ext, part) => {
return part.originalFilename!
},
},
build: {
serverPort: 6666,
dist: 'mockServer',
},
})
}
3、pnpm build 后报错信息（项目本身正常打包完成）
mock-data-1678971238074.js:2:43:
2 │ import * as m0 from 'E:\0WorkSpace\VsCode\app\mock\api.ts';
╵ ^
ERROR Build failed with 1 error: 20:53:58
mock-data-1678971238074.js:2:43: ERROR: Syntax error "i"
mock-data-1678971238074.js:2:43: ERROR: Syntax error "i"
at failureErrorWithLog (node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1636:15)
at node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1048:25
at runOnEndCallbacks (node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1471:45)
at buildResponseToResult (node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1046:7)
at node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1075:16
at responseCallbacks.<computed> (node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:697:9)
at handleIncomingPacket (node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:752:9)
at Socket.readFromStdout (node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:673:7)
at Socket.emit (node:events:512:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
4、mock/api.ts
import { defineMock } from 'vite-plugin-mock-dev-server'
export default defineMock([
{
url: '/mock/caseCache/getData',
body: (res) => {
const { query, params, body } = res
return {
data: {
query,
params,
body,
isLogin: false,
},
message: '成功',
code: '200',
}
},
},
{
url: '/mock/casePackage/initData',
body: () => {
return {
data: {
sectionOptions: [
{ value: '0-1', label: '测试1' },
],
phyunitOptions: [
{ value: '0-2', label: '测试2' },
],
},
message: '成功',
code: '200',
}
},
},
])
5、说明，感觉跟文件无关，删除mock/api.ts后，报错内容一样，不过换成其它mock文件
6、开发环境下，mock测试接口，都可以访问
{
url: `${BASE_URL}/xxx`,
method: ['POST'],
response: (req, res) => {
const { username, password } = req.body
if (xxx === 'xxx' && yyy === 'yyy') {
res.statusCode = 200
res.setHeader('Content-Type', 'application/json')
res.appendHeader('Set-Cookie', 'xxx=xxx; Path=/; HttpOnly')
res.end(
.....
)
}eles if(...){
...
}
}
}mock-dev-server: [response error] /mock-api/xx/xx
file: mock/test.mock.ts TypeError: res.appendHeader is not a function
at response (/home/xx/Desktop/xx/mock/test.mock.ts:54:13)
at /home/xx/Desktop/xx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mock-dev-server/dist/index.cjs:46:105
at processTicksAndRejections (node:internal/process/task_queues:96:5)It was working fine the last commit
node -v
v16.16.0
pnpm -v
8.3.1
vite-plugin-mock-dev-server
1.1.13
typescript
5.0.4
Hello!
Is that possible to respond with raw html file from an actual file? My goal is to emulate response delays while adding some specific response headers when dev server is pointed to few specific locations.
p.s. Thanks for the interesting plugin!
请问支持生产环境吗？
请问支持生产环境吗？
No response
No response
版本：
"node": 18.19.0
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vue": "^3.4.21",
"vite-plugin-mock-dev-server": "^1.5.0",
api.mock.ts 内容：
import { defineMock } from "vite-plugin-mock-dev-server";
export default defineMock({
url: "/api/test",
body: {
name: "Mark",
age: 18,
},
});
vite.config.ts 内容：
import mockDevServerPlugin from "vite-plugin-mock-dev-server";
export default defineConfig(() => {
return {
plugins: [vue(), mockDevServerPlugin()],
build: {
outDir: "dist", // 指定打包路径，默认为项目根目录下的 dist 目录
.......
当我请求 http://localhost:5173/api/test时 ：
接口返回 HTML内容：
<!doctype html>
<html lang="zh">
<head>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- Node: 18.19.0
- packageManager: pnpm
- vue: 3.4.1
- vite: 5.2.0
- vite-plugin-mock-dev-server: 1.5.0No response
很多时候随着项目的迭代，大部分接口都是通过后台的接口获取，mock数据的常见情况是在新的需求中，后台接口未实现之前。
目前绝大部分的mock插件都是本地数据优先。
能否做到优先匹配server.proxy中的地址，如果返回404再走mock接口，
或者开放函数接口，由开发人员自行决定返回值
考虑以下方案：
mockDevServerPlugin({
priority:'before'|'after'
})
随便配置一个无效的 proxy 就能继续走后续 mock 流程了，期望插件本身不强依赖于 proxy 配置。
虽然可以通过插件的 prefix 配置绕过，但是用起来总是有些奇怪。而如果不配置 prefix 又无法区分哪些是接口请求，哪些是资源请求，等于是允许在 *.mock.js 文件中拦截全部请求，也不太合适。
有没有什么好办法支持这种场景呢？🤔
也许应该在检测到 proxy 和 prefix 都未配置时，打印一个警告提醒一下用户？
The plugin works great for mocking REST endpoints but I cannot get WebSocket mocking working. I can proxy to local WebSocket server running on another port so its the mocking itself that does not seem to match requests.
The browser ws request remains pending, e.g.
ws://localhost:5173/foo/ws?id=123&bar=456
The relevant code is:
vite.config.js
import { defineConfig } from "vite";
import mockDevServerPlugin from "vite-plugin-mock-dev-server"
const rootPath = `/foo`;
export default defineConfig({
plugins: [
mockDevServerPlugin({
log: "debug",
wsPrefix: `/${rootPath}/ws`,
}),
],
server: {
proxy: {
[`${rootPath}/user`]: "",
[`${rootPath}/resources`]: ""
}
},
base: `/${rootPath}/web`,
});mock/ws.mock.js
import { defineMock } from "vite-plugin-mock-dev-server";
import mockData from "../mock-data.json";
const rootPath = `/foo`;
export default defineMock({
url: `/${rootPath}/ws`,
ws: true,
setup(wss) {
wss.on("connection", (ws) => {
ws.on('error', console.error);
ws.on('message', (data) => {
console.log('received: %s', data);
});
mockData.messages.forEach(msg => {
ws.send(JSON.stringify(msg));
});
})
},
})My only thought is that path-to-regex is not matching requests with query params.
- OS: MacOS 14.3
- Node: 20.11.0
- packageManager: npm 10.2.4
- vite: 5.1.1 (with plain JS)
- vite-plugin-mock-dev-server: 1.4.7vite console log
3:12:45 PM [vite] server restarted.
3:12:45 PM [vite:mock] GET /foo/user (mock/user.mock.js)
3:12:45 PM [vite:mock] DEBUG /foo/user matches: [ /foo/user ]
3:12:45 PM [vite:mock] GET /foo/resources (mock/resources.mock.js)
3:12:45 PM [vite:mock] DEBUG /foo/resources matches: [ /foo/resources ]
vite正常运行，在mock下创建.ts空文件，会导致vite异常终止，或者mock下存在空的ts文件，vite无法启动
node:internal/errors:490
ErrorCaptureStackTrace(err);
^
TypeError: The "url" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:399:5)
at validateString (node:internal/validators:163:11)
at Url.parse (node:url:175:3)
at urlParse (node:url:146:13)
at E:\0WorkSpace\VsCode\xianhuo\dlsc-app-naiveUI\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin-mock-dev-server\dist\index.cjs:645:62
at Array.forEach (<anonymous>)
at _MockLoader.updateMockList (E:\0WorkSpace\VsCode\xianhuo\dlsc-app-naiveUI\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin-mock-dev-server\dist\index.cjs:644:84)
at _MockLoader.<anonymous> (E:\0WorkSpace\VsCode\xianhuo\dlsc-app-naiveUI\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin-mock-dev-server\dist\index.cjs:567:12)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'ERR_INVALID_ARG_TYPE'
}
当前 issue 仅用于触发 bot 添加 contributors 到 readme.
如何使用 非public目录下的mockData文件夹下的静态文件，模拟服务器的静态文件数据，比如 在根目录/mock/mockData下的模拟静态大文件数据..../mock/mockData/video/camera.mp4（或者*.bin, .mp4,.mp3,*.png），测试服务器的静态文件打开http://localhost:8080/mockData/video/camera.mp4，必须使用download方式mock吗？
谢谢
是否可以在
MockServerPluginOptions{
staticDir: ['./mock/mockDataPath1', './mock/mockDataPath2',...]
}这样简单配置？
No response
No response
对于同一个页面中发起的 api 请求，可以根据特定的 referer query 加载不同的 mock 数据，例：
localhost/index.html?mock=张三
localhost/index.html?mock=李四
支持的场景：
可以不侵入业务源码，通过在页面 url 中添加特定标识，便可控制页面中一些接口响应所需的 mock 数据
I want to set a delay to every mock.
The server.proxy setting in vite.config.js is:
server: {
// ...
proxy: {
'^/api/v[0-9]/': {
target: HTTP_API_URI,
changeOrigin: true,
ws: false
}
}
// ...
},And I define a mock on the top of all mocks:
{
url: '/api/(.*)',
method: ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'TRACE'],
delay: 0.5 * ONE_SECOND,
response(_, __, next) {
next()
}
}I've tried to log something before next(). But nothing is printed.
- OS: macOS Sonoma 14.4.1
- Node: v20.12.0
- packageManager: yarn 1.22.21
- vite: 5.1.5
- vite-plugin-mock-dev-server: 1.4.7No response
安装了最新的1.5.0的版本，报错如下：
The CJS build of vite-plugin-mock-dev-server's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
- OS: macOS 13.6.6
- Node: v18.19.0
- packageManager: yarn
- vite: 4.5.0
- vite-plugin-mock-dev-server: 1.5.0yarn run dev --host
yarn run v1.22.19
$ vite --host
The CJS build of vite-plugin-mock-dev-server's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
VITE v4.5.0 ready in 579 ms
➜ Local: http://localhost:5173
➜ Network: http://192.168.8.18:5173
➜ Network: http://0.0.1.1:5173
➜ press h to show help
我在vite4.x版本中，配置了针对于mock的别名，然后进行一些方法的导入。如果是冷启动的时候，该方法必然会被提示找不到：
如果我在修改代码后，该导入又是正常的。
这个问题让我很困惑，希望得到解决一下，否则在嵌套层数过深的地方，很不友好。
Error: Unsupported content-type: multipart/form-data; boundary=----WebKitFormBoundaryJBADTbzOOrlYZerZ
1.在vite.config.js中的mockDevServerPlugin中新增加配置选项urlPrefix，用于指定mock的url前缀
或者在mockDevServerPlugin中新增加配置选项urlRewrite，用于指定mock的url重写规则
或是直接读取vite.config.js中的server.proxy中的rewrite规则
export default defineConfig({
plugins: [
mockDevServerPlugin({
urlPrefix:'/api',
//或者
urlRewrite: (path) => path.replace(/^\/api/, ''),
})
],
server: {
proxy: {
'/api': {
target: "http://example.com",
rewrite: (path) => path.replace(/^\/api/, ''),
}
}
}
})
2.改造defineMock，添加第二个参数，用于指定MockOptionsItem的url前缀
defineMock([{
url:'/login'
...
}，{
url:'/logout'
...
}], {
urlPrefix:'/api/user'
})
1.proxy中的key一般情况下并不是直接存在于api的url中，而是用户为了统一代理而添加的一个自定义前缀，比如/api，/api2，/api3等等
但是在mock中如果每一项都添加一个/api的话，会导致mock的url和真实的url看起来不一致，而且麻烦，所以希望能够统一指定一个前缀
2.在同一个mock文件中，一般都是同一类的api,例如user相关的api,一般都会以/user开始。
以上只是部分使用场景的举例，我感觉如果将此功能加入后，会更加方便，也更加灵活。
当defineMock中的urlPrefix选项和mockDevServerPlugin中的urlPrefix或urlRewrite都存在时，应该以哪个为准? 或者是同时生效?
Maybe the incompatible esbuild version cause this problem.[I'm not sure now]
Would you mind set esbuild to peerDep or other ways to keep esbuild's version unique in project
I found the 4.x vite was still use 0.18.x esbuild
"dependencies": {
"esbuild": "^0.18.10",
"postcss": "^8.4.27",
"rollup": "^3.27.1"
},
The mock-server does serve files in dev mode, is there a way to make the mock-server available in preview mode.
这个问题，应该不算插件本身的问题，但实际使用中遇到了，不晓得有没有好的解决思路，两个mock请求，对应的响应方法：
响应A：但是其中一个通过while循环，时间判断10秒后，再返回结果，
响应B：直接返回
按钮A对应响应A，按钮B对应响应B，直接先点击B，再点击A，由于同步机制，会导致A需要等待B响应完成后才能返回，这也就意味着，mock情况下，如果方法是前后按序触发，只能按序执行，当然实际后台请求都是异步，不会存在这种情况
针对这种现象，插件是否可以统一规避掉？
环境：
vite3+vue3
问题描述：
我不想频繁操作vite.config文件，看到您官网上有一个【enable】属性，但是写了enable属性后，会导致ts报错如下：
并且，只要写了enable之后不管写true还是false都不走mock了
期望：
1、有一个拦截函数，类似于下面格式
const mockEnable = false
export default mockFilter({ url, params, body, query, xxx }) :Boolean => {})
export default defineMock({ xxxxxxx })
2.修复enable功能
3.修复ts报错
结合微前端时，需要设置支持跨域，
子项目为vite 已经配置过跨域了，但mock 接口还是提示跨域
想每一个mock 接口都 增加 以下header 配置，如何在一个地方全局增加这个配置呢
headers: {
'access-control-allow-credentials': 'true',
'access-control-allow-origin': '*',
'access-control-allow-headers': 'X-Requested-With,Content-Type',
'access-control-allow-methods': '*'
},
希望 mockDevServerPlugin 添加一个 base_url 配置：
// vite.config.ts
mockDevServerPlugin({
base_url: '/api/v1',
}),
// user.mock.ts
export default defineMock({
url: '/users', // => 等价于 /api/v1/users
body: {
data: [],
},
})避免写很多
export default defineMock({
url: `${BASE_URL}/xxx`,
})或者当前有什么方法可以拦截统一加一个前缀?
export const prefixDefineMock = ({url, ...rest}) => defineMock({ url: `${BASE_URL}/${url}`, ...rest})这样对 js/ts 可以，对 json 就不行了
如题
放在mock目录下可以，放在src目录下不行
使用 response(req, res, next) 自定义处理时，对于 POST 请求，无法通过 next() 方式将请求转交给下一个中间件（Vite 默认代理转发）处理 。浏览器 Network 一直处于 pending 状态，直至超时后 canceled 状态。
对于 GET 请求不受影响，可被 Vite 默认代理转发至目标服务器。应该是因为 mock 插件提取 body 时，消耗了 request 流，造成 post 请求无法转交给后续处理器。
这个链接可以参考一下：
https://github.com/pfdgithub/scaffold-webpack/blob/react/cfg/devServer.js#L63
vite.config.js
{
server: {
proxy: {
"/api": {
target: "http://1.2.3.4:5"
},
}
}
}
_.mock.js
export default defineMock([
{
url: "/api/(.*)",
response: async (req, res, next) => {
console.log(req.method, req.url);
next();
},
},
]);
Network
1、环境：v0.4.0 + vue 2.7.14 + vite 4.1.3
2、问题
1）开发环境，修改***.mock.ts文件接口数据，好像无法热更新
2）是否可支持属性同义词配置，比如，axios中 params 表示 url后的参数，data表示body体的参数，但实际mock接口接收后，query、params、body无法对应，是否可支持同义词配置？alias : { body：'data', query: 'params'}
服务正常启动，但是请求进来后报错，并且造成服务中止。报错如下：
$ node index.js
listen: http://localhost:3002
node:internal/errors:478
ErrorCaptureStackTrace(err);
^
TypeError [ERR_HTTP_INVALID_HEADER_VALUE]: Invalid value "undefined" for header "X-File-Path"
at ServerResponse.setHeader (node:_http_outgoing:647:3)
at provideHeaders (file:///D:/MyProject/nanke-web/dist/mockServer/node_modules/vite-plugin-mock-dev-server/dist/index.js:934:7)
at file:///D:/MyProject/nanke-web/dist/mockServer/node_modules/vite-plugin-mock-dev-server/dist/index.js:836:11
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
code: 'ERR_HTTP_INVALID_HEADER_VALUE'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.根据报错可知，是一个 JS 常见的 undefined 错误。进入 dist/index.js 临时修改代码
-934 res.setHeader("X-File-Path", filepath);
+934 res.setHeader("X-File-Path", filepath || ''); 可临时解决问题
是否可以支持：打印输出请求进来的 info 信息，这样可以明确知道请求确实是到了这里，而不是开发者手动去检查
是否可以支持：打包的 mockServer 在 dist 目录外面。这导致每次进行打包需要重新进入 mockServer 进行 install 和 start
是否可以支持：将 mockServer 复制到 vite 项目之外时，能够正常启动。
我将 mockServer 复制到 vite 项目之外后，启动报错：
$ node index.js
node:internal/errors:478
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from D:\MyProject\mockServer\node_modules\vite-plugin-mock-dev-server\dist\index.js
at new NodeError (node:internal/errors:387:5)
at packageResolve (node:internal/modules/esm/resolve:852:9)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1115:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.生产环境下作为临时的数据来源，确实有这个需求：与 vite 项目打包的 dist 目录进行解耦
这里为啥由2改为了1
当我通过pnpm run dev 启动项目时，偶尔（大概率）会报错，但是项目能正常运行起来
✘ [ERROR] The entry point "mock/table.ts.timestamp-1710847630001.mjs" cannot be marked as external
Error: Build failed with 1 error:
error: The entry point "mock/table.ts.timestamp-1710847630001.mjs" cannot be marked as external
at failureErrorWithLog (/Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
at /Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1059:25
at runOnEndCallbacks (/Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1486:45)
at buildResponseToResult (/Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1057:7)
at /Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1086:16
at responseCallbacks.<computed> (/Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:704:9)
at handleIncomingPacket (/Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:764:9)
at Socket.readFromStdout (/Users/sun/Code/Vue/WebDevPractice/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:680:7)
at Socket.emit (node:events:517:28)
at addChunk (node:internal/streams/readable:368:12) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
- OS:MacOS M1
- Node:v18.19.1
- packageManager:pnpm
- vite:^5.0.12
- vite-plugin-mock-dev-server:^1.4.7/mock/table.ts
import { defineMock } from "vite-plugin-mock-dev-server";
import { faker } from "@faker-js/faker";
const data = [
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
{
date: faker.date.past(),
name: faker.internet.userName(),
address: faker.location.city(),
},
];
export default defineMock({
url: "/api/table",
body: ({ body: { page, pageSize } }) => {
return {
total: data.length,
data: data.slice((page - 1) * pageSize, page * pageSize),
};
},
delay: 1000,
});
Originally posted by @kenixFog in #15 (comment)
遇到个新"问题"，但是不晓得能不能从插件层面进行容错~~
body: (res, query, params, body) => { ❌这个修改的时候，我改错了，我写成了
(body: (res, {query, params, body} ) => {)然后导致程序直接退出
E:\0WorkSpace\app\mock\api.mock.ts:30 body: (res, { query, params, body }) => { ^ TypeError: Cannot destructure property 'query' of 'undefined' as it is undefined. at Object.body (E:\0WorkSpace\app\mock\api.mock.ts:30:19) at E:\0WorkSpace\app\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin->mock-dev-server\dist\index.cjs:456:34 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Node.js v19.6.0 ELIFECYCLE Command failed with exit code 1.这个写法肯定有问题，但万一手抖，改错了。。重新启动，时间成本略微有点高~
yarn install v1.22.19
warning package.json: No license field
warning mock-server: No license field
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.npmmirror.com/@%2ftypes: [NOT_FOUND] /@%2ftypes not found".
info If you think this is a bug, please open a bug report with the information provided in "D:\\MyProject\\nanke-web\\dist\\mockServer\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.查询原因是 package.json 中的依赖 "@/types": "latest" 导致的。将之删除后，进行 yarn start，出现启动报错
$ node index.js
file:///D:/MyProject/nanke-web/dist/mockServer/node_modules/vite-plugin-mock-dev-server/dist/index.js:1329
(_a = loader.on) == null ? void 0 : _a.call(loader, "mock:update-end", (filepath) => {
^
TypeError: Cannot read properties of undefined (reading 'on')
at mockWebSocket (file:///D:/MyProject/nanke-web/dist/mockServer/node_modules/vite-plugin-mock-dev-server/dist/index.js:1329:16)
at file:///D:/MyProject/nanke-web/dist/mockServer/index.js:14:1
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async loadESM (node:internal/process/esm_loader:91:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.搞不清楚websocket如何配置，才能使用？
另外，请问一下，export default defineMock()这里是只能导出默认的default方法，还是支持任意导出？
如题，在请求时传了个很大的body后，raw-body解析request时报
PayloadTooLargeError: request entity too large
因为co-body默认的limit为1mb，建议在传入一个很大的limit配置，具体数值看你掐指一算
- OS: macOS 13.6.5
- Node: 18
- packageManager: yarn
- vite: ^4.4.5
- vite-plugin-mock-dev-server: ^1.4.7PayloadTooLargeError: request entity too large
at readStream (node_modules/raw-body/index.js:163:17)
at executor (node_modules/raw-body/index.js:120:5)
at new Promise ()
at getRawBody (node_modules/raw-body/index.js:119:10)
at module.exports [as json] (node_modules/co-body/lib/json.js:39:21)
at parseReqBody (file://node_modules/vite-plugin-mock-dev-server/dist/index.js:656:31)
at file://node_modules/vite-plugin-mock-dev-server/dist/index.js:775:27
at call (file://node_modules/vite/dist/node/chunks/dep-52909643.js:50689:7)
at next (file://node_modules/vite/dist/node/chunks/dep-52909643.js:50633:5)
at cors (node_modules/cors/lib/index.js:188:7)
at node_modules/cors/lib/index.js:224:17
at originCallback (node_modules/cors/lib/index.js:214:15)
at node_modules/cors/lib/index.js:219:13
at optionsCallback (node_modules/cors/lib/index.js:199:9)
at corsMiddleware (node_modules/cors/lib/index.js:204:7)
at file://node_modules/vite-plugin-mock-dev-server/dist/index.js:1534:22
at call (file://node_modules/vite/dist/node/chunks/dep-52909643.js:50689:7)
at next (file://node_modules/vite/dist/node/chunks/dep-52909643.js:50633:5)
at Function.handle (file://node_modules/vite/dist/node/chunks/dep-52909643.js:50636:3)
at Server.app (file://node_modules/vite/dist/node/chunks/dep-52909643.js:50501:37)
at Server.emit (node:events:517:28)
at parserOnIncoming (node:_http_server:1123:12)
at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17) {
expected: 2003701,
length: 2003701,
limit: 1048576,
type: 'entity.too.large'
}
做示例数据时需要多个*.mock.ts同时公用一套数据，但是用单例类模式也会在每个mock模块中重新生成数据，导致列表和编辑不是一条数据
首先非常感谢vite-plugin-mock-dev-server的贡献。
以下是我在使用过程中遇到的问题。
插件版本：1.0.6
vite版本：4.1.4
vue版本：3.2.41
node版本：18.14.1
在mock中使用vite.config.ts中定义的路径别名@时，会引发以下错误
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@/api' imported from E:\vue_work\cms-client\mock\user.mock.ts.timestamp-1679469726707.mjs
at new NodeError (node:internal/errors:399:5)
at packageResolve (node:internal/modules/esm/resolve:889:9)
at moduleResolve (node:internal/modules/esm/resolve:938:20)
at defaultResolve (node:internal/modules/esm/resolve:1153:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
使用@别名的情况为：在mock文件中使用了api请求中定义的url枚举类。或者导入定义的type类型
以下是项目代码
//mock/user.mock.ts
import {defineMock} from 'vite-plugin-mock-dev-server';
import {UserApiUrl} from "@/api/user";
export default defineMock([
{
url: UserApiUrl.login,
body(req) {
return {token: "1111"};
}
},
]);
//src/api/user
export enum UserApiUrl {
login = '/user/login',
}
如果我在mock中将@别名改为/src时，如果引入的文件中又使用@别名引入了其他文件，同样会引发此错误。
所以我不太清除是插件不支持在mock文件中使用别名，还是我哪里配置有问题。
还请大佬们不吝赐教。
hi there 👋
thanks for this great tool and apologies for the english here 🙏
with a vite configuring like this:
define: {
'import.meta.env.__X__': JSON.stringify({ my: 'object' )),
},i get an error:
✘ [ERROR] Invalid define value (must be an entity name or valid JSON syntax): {"BASE_URL":"/","MODE":"development","DEV":true,"PROD":false,"__X__":{\"my\":\"object\}"}
Error: Build failed with 1 error:
error: Invalid define value (must be an entity name or valid JSON syntax): {"BASE_URL":"/","MODE":"development","DEV":true,"PROD":false,"__X__":{\"my\":\"object\}"}
at failureErrorWithLog (/Users/me/code/my-app/node_modules/esbuild/lib/main.js:1651:15)
at /Users/me/code/my-app/node_modules/esbuild/lib/main.js:1059:25
at runOnEndCallbacks (/Users/me/code/my-app/node_modules/esbuild/lib/main.js:1486:45)
at buildResponseToResult (/Users/me/code/my-app/node_modules/esbuild/lib/main.js:1057:7)
at /Users/me/code/my-app/node_modules/esbuild/lib/main.js:1086:16
at responseCallbacks.<computed> (/Users/me/code/my-app/node_modules/esbuild/lib/main.js:704:9)
at handleIncomingPacket (/Users/me/code/my-app/node_modules/esbuild/lib/main.js:764:9)
at Socket.readFromStdout (/Users/me/code/my-app/node_modules/esbuild/lib/main.js:680:7)
at Socket.emit (node:events:514:28)
at addChunk (node:internal/streams/readable:545:12) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}
naively, i think the issue is caused by re-writing the user define entries (here). in cases where the parsed value is an object, esbuild errors.
ideally user defines wouldn't be edited, just passed thru as they were set.
also see: #31
我的场景是，需要在一个单独的文件中定义一些通用 mock 规则，并在其他文件中定义专用规则，希望能优先匹配专用规则。
看到之前的 issue 中有类似的问题，插件文档中也没有相关的描述，希望能添加支持。
另外在本次排查中，还发现一个 bug，不确定是否跟你的问题有关联。大概跟你描述下。
当mock配置中有以下两个类似的配置文件时时：
// a.mock.ts export default defineMock({ url: '/api/post/:postId' })// b.mock.ts export default defineMock({ url: '/api/post/list' })如果
a.mock.ts优先于b.mock.ts被解析加载，那么客户端发起的/api/post/list的请求，会总是命中a.mock.ts中的配置，而不是命中期望的b.mock.ts的配置，这是由于/api/post/list也是符合/api/post/:postId的解析匹配的。这个问题也可能会导致对
b.mock.ts的配置使用enabled，也不会有预期表现。
这个库好像不支持axios拦截，只有fetch支持
大佬好项目前期可能只是想简单的纯前端部署展示，不想涉及后端，比如打包后部署到nginx上，通过mock数据进行简单的展示是否可以提供对该场景的支持？
在[email protected]和@vitejs/[email protected]下，启用 options.build 配置后，执行npm run build会报错：
Invalid define value (must be an entity name or valid JSON syntax): {"BASE_URL":"./","MODE":"production","DEV":false,"PROD":true,"LEGACY":__VITE_IS_LEGACY__}
生成了mockServer目录和文件，但mock-data.js文件中是空的。
可能与 babel 或 rollup 版本有关？没往下查，可参考：
vitejs/vite#2442
babel/babel#13017
rollup/plugins#838
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.