在VUE3+Vite 中 mock 数据
2023-09-11 14:21:35 时间
1.
安装 mockjs 和 vite-plugin-mock
npm i mockjs vite-plugin-mock --save-dev
2. 在 vite.config.ts 文件中配置 vite-plugin-mock , 貌似安装的mock相关在这里注册就可以,其它的文件不需要引用mock相关内容。
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:false, logger: false, mockPath: "./mock/" }) ] })
3. 在根目录下创建mock文件夹 ,注意是根目录, 不是 src
新建文件 mock/index.js
/**
* 所有站点数据
*/
export default [
{
url: "/api/stations",
type: "get",
response: () => {
return stationData
}
}
]
如果 mock 文件夹建在src 文件目录下,需要修改 tsconfig.json 文件
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","src/mock/**/*.ts"],
4. 调用
const getStationData = () => {
axios.get("/api/stations")
.then(res => {
const data = res.data
console.log(data)
})
}
参考: https://blog.csdn.net/liguoyuan819/article/details/124768562
相关文章
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- Vue3快速上手资料!手把手带你彻底学会Vue3,超详细讲解!不怕学不会!【建议收藏】【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通vue3笔记资料】
- vue3 中 pinia 的 state 修改模版绑定的 state 数据没更新?
- vue3 中如何实现数组响应式
- vite + vue3 项目中引入文件路由
- Vue3学习笔记(二)——组合式API(Composition API)
- 从0搭建Vue3组件库(五): 如何使用Vite打包组件库
- 搭建 vite + vue3 + ts + pinia 项目框架
- 深入Vue3源码,看看Vue.use后究竟发生了什么?
- Vue3编译优化
- vue2和vue3有哪些区别和不同2
- 掌握Vue3模板语法,助你轻松实现高效Web开发