在vite(vue)中使用mock,vite-plugin-mock生产(线上)环境和开发环境配置
在vite(vue)中使用mock,生产(线上)环境和开发环境配置
·
在vite中使用mock
首先在项目中安装
mockjs
和
vite-plugin-mock
npm i mockjs vite-plugin-mock
开发环境
- 根目录新建mock文件夹,内部创建index.js,写入以下内容
mock规则可参考mockjs介绍总结
export default [
{
url: "/api/yujing/sisetu",
method: "get",
response: () => {
return {
code: 0,
message: "ok",
'data|12': [{
warnBl: 0,// 预警占比
'warnLevel|0-3': 0,// 预警等级
'warnNum|0-100': 0,// 预警数量
'warnTotal|0-100': 0,// 报警数量
}]
}
}
}
]
- 修改
vite.config.js
,如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteMockServe({// 更多配置见最下方
supportTs: true,
logger: false,
mockPath: "./mock/" // 文件位置
})
]
})
// vite.config.js
- 然后就可以使用了
别忘了装axios
import axios from 'axios'
axios.get("/api/yujing/sisetu").then((res) => {
console.log(res);
});
- 请求成功
生产(线上)环境使用
如果不配置,请求都会变成404
- 在src中新建文件
mockProdServer.js
,写入以下内容
// mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
// 逐一导入您的mock.js文件
// 如果使用vite.mock.config.js,只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import index from '../mock/index'
export function setupProdMockServer() {
createProdMockServer([...index])
}
2.修改vite.config.js
,如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteMockServe({// 更多配置见最下方
mockPath: "./mock/", //mock文件地址
localEnabled: false, // 开发打包开关
prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `,
logger: false, //是否在控制台显示请求日志
supportTs: false //打开后,可以读取 ts 文件模块。 请注意,打开后将无法监视.js 文件
})
]
})
-
打包
npm run build
4.上传至服务器
请求成功
viteMockServe配置项介绍
{
mockPath?: string;
supportTs?: boolean;
ignore?: RegExp | ((fileName: string) => boolean);
watchFiles?: boolean;
localEnabled?: boolean;
ignoreFiles?: string[];
configPath?: string;
prodEnabled?: boolean;
injectFile?: string;
injectCode?: string;
logger?:boolean;
}
mockPath
type: string
default: mock
设置模拟.ts 文件的存储文件夹
如果watchFiles:true,将监视文件夹中的文件更改。 并实时同步到请求结果
如果 configPath 具有值,则无效
supportTs
type: boolean
default: true
打开后,可以读取 ts 文件模块。 请注意,打开后将无法监视.js 文件。
ignore
type: RegExp | ((fileName: string) => boolean);
default: undefined
自动读取模拟.ts 文件时,请忽略指定格式的文件
watchFiles
type: boolean
default: true
设置是否监视mockPath对应的文件夹内文件中的更改
localEnabled
type: boolean
default: command === 'serve'
设置是否启用本地 xxx.ts 文件,不要在生产环境中打开它.设置为 false 将禁用 mock 功能
prodEnabled
type: boolean
default: command !== 'serve'
设置打包是否启用 mock 功能
injectCode
type: string
default: ''
如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}
这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。
如果代码直接写在main.ts内,则不管有没有开启,最终的打包都会包含mock.js
injectFile
type: string
default: path.resolve(process.cwd(), 'src/main.{ts,js}')
injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}
configPath
type: string
default: vite.mock.config.ts
设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时,将首先读取并使用该文件。 配置文件返回一个数组
logger
type: boolean
default: true
是否在控制台显示请求日志
更多推荐
已为社区贡献1条内容
所有评论(0)