Skip to content

Commit 6e195c8

Browse files
xiaoxian521xiaoxian521
authored
refactor: 使用vite-plugin-fake-server替换vite-plugin-mock，使用@faker-js/faker替换mockjs (#763)
1 parent 743691b commit 6e195c8

12 files changed

+1383
-1292
lines changed

‎build/cdn.ts

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
33
/**
44
* @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
55
* 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
6-
* 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
76
* 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
87
*/
98
export const cdn = importToCDN({

‎build/plugins.ts

+6-11
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,19 @@ import vue from "@vitejs/plugin-vue";
44
import { viteBuildInfo } from "./info";
55
import svgLoader from "vite-svg-loader";
66
import vueJsx from "@vitejs/plugin-vue-jsx";
7-
import { viteMockServe } from "vite-plugin-mock";
87
import { configCompressPlugin } from "./compress";
98
import { visualizer } from "rollup-plugin-visualizer";
109
import removeConsole from "vite-plugin-remove-console";
1110
import { themePreprocessorPlugin } from "@pureadmin/theme";
1211
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
1312
import { genScssMultipleScopeVars } from "../src/layout/theme";
13+
import { vitePluginFakeServer } from "vite-plugin-fake-server";
1414

1515
export function getPluginsList(
1616
command: string,
1717
VITE_CDN: boolean,
1818
VITE_COMPRESSION: ViteCompression
1919
) {
20-
const prodMock = true;
2120
const lifecycle = process.env.npm_lifecycle_event;
2221
return [
2322
vue(),
@@ -43,15 +42,11 @@ export function getPluginsList(
4342
// svg组件化支持
4443
svgLoader(),
4544
// mock支持
46-
viteMockServe({
47-
mockPath: "mock",
48-
localEnabled: command === "serve",
49-
prodEnabled: command !== "serve" && prodMock,
50-
injectCode: `
51-
import { setupProdMockServer } from './mockProdServer';
52-
setupProdMockServer();
53-
`,
54-
logger: false
45+
vitePluginFakeServer({
46+
logger: false,
47+
include: "mock",
48+
infixName: false,
49+
enableProd: true
5550
}),
5651
// 打包分析
5752
lifecycle === "report"

‎mock/asyncRoutes.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// 模拟后端动态生成路由
2-
import { MockMethod } from "vite-plugin-mock";
2+
import { defineFakeRoute } from "vite-plugin-fake-server/client";
33
import { system, permission, frame, tabs } from "@/router/enums";
44

55
/**
@@ -198,7 +198,7 @@ const tabsRouter = {
198198
]
199199
};
200200

201-
export default [
201+
export default defineFakeRoute([
202202
{
203203
url: "/get-async-routes",
204204
method: "get",
@@ -209,4 +209,4 @@ export default [
209209
};
210210
}
211211
}
212-
] as MockMethod[];
212+
]);

‎mock/list.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { MockMethod } from "vite-plugin-mock";
1+
import { defineFakeRoute } from "vite-plugin-fake-server/client";
22

3-
export default [
3+
export default defineFakeRoute([
44
{
55
url: "/get-card-list",
66
method: "post",
@@ -676,4 +676,4 @@ export default [
676676
};
677677
}
678678
}
679-
] as MockMethod[];
679+
]);

‎mock/login.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// 根据角色动态生成路由
2-
import { MockMethod } from "vite-plugin-mock";
2+
import { defineFakeRoute } from "vite-plugin-fake-server/client";
33

4-
export default [
4+
export default defineFakeRoute([
55
{
66
url: "/login",
77
method: "post",
@@ -33,4 +33,4 @@ export default [
3333
}
3434
}
3535
}
36-
] as MockMethod[];
36+
]);

‎mock/map.ts

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
1-
import { MockMethod } from "vite-plugin-mock";
1+
import { defineFakeRoute } from "vite-plugin-fake-server/client";
2+
import { faker } from "@faker-js/faker/locale/zh_CN";
23

34
type mapType = {
45
plateNumber: string;
56
driver: string;
6-
"orientation|1-360": number;
7-
"lng|113-114.1-10": number;
8-
"lat|34-35.1-10": number;
7+
orientation: number;
8+
lng: number;
9+
lat: number;
910
};
1011

11-
// http://mockjs.com/examples.html#Object
1212
const mapList = (): Array<mapType> => {
1313
const result: Array<mapType> = [];
1414
for (let index = 0; index < 200; index++) {
1515
result.push({
16-
plateNumber: "豫A@natural(11111, 99999)@character('upper')",
17-
driver: "@cname()",
18-
"orientation|1-360": 100,
19-
"lng|113-114.1-10": 1,
20-
"lat|34-35.1-10": 1
16+
plateNumber: `豫A${faker.string.numeric({
17+
length: 5
18+
})}${faker.string.alphanumeric({
19+
casing: "upper"
20+
})}`,
21+
driver: faker.person.firstName(),
22+
orientation: faker.number.int({ min: 1, max: 360 }),
23+
lng: faker.location.latitude({ max: 114.1, min: 113 }),
24+
lat: faker.location.latitude({ max: 35.1, min: 34 })
2125
});
2226
}
2327
return result;
2428
};
2529

26-
export default [
30+
export default defineFakeRoute([
2731
{
2832
url: "/get-map-info",
2933
method: "get",
@@ -34,4 +38,4 @@ export default [
3438
};
3539
}
3640
}
37-
] as MockMethod[];
41+
]);

‎mock/refreshToken.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { MockMethod } from "vite-plugin-mock";
1+
import { defineFakeRoute } from "vite-plugin-fake-server/client";
22

33
// 模拟刷新token接口
4-
export default [
4+
export default defineFakeRoute([
55
{
66
url: "/refresh-token",
77
method: "post",
@@ -24,4 +24,4 @@ export default [
2424
}
2525
}
2626
}
27-
] as MockMethod[];
27+
]);

‎mock/system.ts

+36-35
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { MockMethod } from "vite-plugin-mock";
1+
import { defineFakeRoute } from "vite-plugin-fake-server/client";
2+
import { faker } from "@faker-js/faker/locale/zh_CN";
23

3-
export default [
4+
export default defineFakeRoute([
45
// 用户管理
56
{
67
url: "/user",
@@ -12,7 +13,7 @@ export default [
1213
nickname: "admin",
1314
avatar: "https://avatars.githubusercontent.com/u/44761321",
1415
phone: "15888886789",
15-
email: "@email",
16+
email: faker.internet.email(),
1617
sex: 0,
1718
id: 1,
1819
status: 1,
@@ -30,7 +31,7 @@ export default [
3031
nickname: "common",
3132
avatar: "https://avatars.githubusercontent.com/u/52823142",
3233
phone: "18288882345",
33-
email: "@email",
34+
email: faker.internet.email(),
3435
sex: 1,
3536
id: 2,
3637
status: 1,
@@ -153,132 +154,132 @@ export default [
153154
id: 100,
154155
sort: 0,
155156
phone: "15888888888",
156-
principal: "@cname()",
157-
email: "@email",
157+
principal: faker.person.firstName(),
158+
email: faker.internet.email(),
158159
status: 1, // 状态 1 启用 0 停用
159160
type: 1, // 1 公司 2 分公司 3 部门
160161
createTime: 1605456000000,
161-
remark: "@cparagraph(1, 3)"
162+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
162163
},
163164
{
164165
name: "郑州分公司",
165166
parentId: 100,
166167
id: 101,
167168
sort: 1,
168169
phone: "15888888888",
169-
principal: "@cname()",
170-
email: "@email",
170+
principal: faker.person.firstName(),
171+
email: faker.internet.email(),
171172
status: 1,
172173
type: 2,
173174
createTime: 1605456000000,
174-
remark: "@cparagraph(1, 3)"
175+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
175176
},
176177
{
177178
name: "研发部门",
178179
parentId: 101,
179180
id: 103,
180181
sort: 1,
181182
phone: "15888888888",
182-
principal: "@cname()",
183-
email: "@email",
183+
principal: faker.person.firstName(),
184+
email: faker.internet.email(),
184185
status: 1,
185186
type: 3,
186187
createTime: 1605456000000,
187-
remark: "@cparagraph(1, 3)"
188+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
188189
},
189190
{
190191
name: "市场部门",
191192
parentId: 102,
192193
id: 108,
193194
sort: 1,
194195
phone: "15888888888",
195-
principal: "@cname()",
196-
email: "@email",
196+
principal: faker.person.firstName(),
197+
email: faker.internet.email(),
197198
status: 1,
198199
type: 3,
199200
createTime: 1605456000000,
200-
remark: "@cparagraph(1, 3)"
201+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
201202
},
202203
{
203204
name: "深圳分公司",
204205
parentId: 100,
205206
id: 102,
206207
sort: 2,
207208
phone: "15888888888",
208-
principal: "@cname()",
209-
email: "@email",
209+
principal: faker.person.firstName(),
210+
email: faker.internet.email(),
210211
status: 1,
211212
type: 2,
212213
createTime: 1605456000000,
213-
remark: "@cparagraph(1, 3)"
214+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
214215
},
215216
{
216217
name: "市场部门",
217218
parentId: 101,
218219
id: 104,
219220
sort: 2,
220221
phone: "15888888888",
221-
principal: "@cname()",
222-
email: "@email",
222+
principal: faker.person.firstName(),
223+
email: faker.internet.email(),
223224
status: 1,
224225
type: 3,
225226
createTime: 1605456000000,
226-
remark: "@cparagraph(1, 3)"
227+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
227228
},
228229
{
229230
name: "财务部门",
230231
parentId: 102,
231232
id: 109,
232233
sort: 2,
233234
phone: "15888888888",
234-
principal: "@cname()",
235-
email: "@email",
235+
principal: faker.person.firstName(),
236+
email: faker.internet.email(),
236237
status: 1,
237238
type: 3,
238239
createTime: 1605456000000,
239-
remark: "@cparagraph(1, 3)"
240+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
240241
},
241242
{
242243
name: "测试部门",
243244
parentId: 101,
244245
id: 105,
245246
sort: 3,
246247
phone: "15888888888",
247-
principal: "@cname()",
248-
email: "@email",
248+
principal: faker.person.firstName(),
249+
email: faker.internet.email(),
249250
status: 0,
250251
type: 3,
251252
createTime: 1605456000000,
252-
remark: "@cparagraph(1, 3)"
253+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
253254
},
254255
{
255256
name: "财务部门",
256257
parentId: 101,
257258
id: 106,
258259
sort: 4,
259260
phone: "15888888888",
260-
principal: "@cname()",
261-
email: "@email",
261+
principal: faker.person.firstName(),
262+
email: faker.internet.email(),
262263
status: 1,
263264
type: 3,
264265
createTime: 1605456000000,
265-
remark: "@cparagraph(1, 3)"
266+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
266267
},
267268
{
268269
name: "运维部门",
269270
parentId: 101,
270271
id: 107,
271272
sort: 5,
272273
phone: "15888888888",
273-
principal: "@cname()",
274-
email: "@email",
274+
principal: faker.person.firstName(),
275+
email: faker.internet.email(),
275276
status: 0,
276277
type: 3,
277278
createTime: 1605456000000,
278-
remark: "@cparagraph(1, 3)"
279+
remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
279280
}
280281
]
281282
};
282283
}
283284
}
284-
] as MockMethod[];
285+
]);

‎package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@
7373
"md-editor-v3": "2.7.2",
7474
"mint-filter": "^4.0.3",
7575
"mitt": "^3.0.1",
76-
"mockjs": "^1.1.0",
7776
"nprogress": "^0.2.0",
7877
"path": "^0.12.7",
7978
"pinia": "^2.1.7",
@@ -105,14 +104,14 @@
105104
"devDependencies": {
106105
"@commitlint/cli": "^17.7.2",
107106
"@commitlint/config-conventional": "^17.7.0",
107+
"@faker-js/faker": "^8.2.0",
108108
"@iconify-icons/ep": "^1.2.12",
109109
"@iconify-icons/ri": "^1.2.10",
110110
"@iconify/vue": "^4.1.1",
111111
"@intlify/unplugin-vue-i18n": "^1.4.0",
112112
"@pureadmin/theme": "^3.2.0",
113113
"@types/intro.js": "^5.1.2",
114114
"@types/js-cookie": "^3.0.4",
115-
"@types/mockjs": "^1.0.8",
116115
"@types/node": "^20.8.2",
117116
"@types/nprogress": "0.2.0",
118117
"@types/qrcode": "^1.5.2",
@@ -160,7 +159,7 @@
160159
"vite": "^4.5.0",
161160
"vite-plugin-cdn-import": "^0.3.5",
162161
"vite-plugin-compression": "^0.5.1",
163-
"vite-plugin-mock": "2.9.6",
162+
"vite-plugin-fake-server": "^2.0.0",
164163
"vite-plugin-remove-console": "^2.1.1",
165164
"vite-svg-loader": "^4.0.0",
166165
"vue-eslint-parser": "^9.3.2",

0 commit comments

Comments
 (0)