设置 mock_Quasar 使用 Mock.js
Quasar 使用 Mock.js
前言
之前我开发VUE的时候都是使用Element-UI,在Element-UI下有许多优秀的项目,比如著名的vue-element-admin。
不过Element-UI最近似乎很少维护了,在被网友安利了Quasar后看来其官方文档https://quasar.dev/(中文:http://www.quasarchs.com/)后感觉功能挺多的,架构设计等个人感觉挺优美的,于是计划下一个项目切到Quasar,但是Quasar缺乏一个像vue-element-admin的项目,所以有些东西就得自己动手。其中vue-element-admin的Mock Data新方案mock-server
,十分的好用,于是像移植过来,至于为什么不直接使用Mockjs呢,vue-element-admin已经讲的很清楚了:
由于 vue-element-admin 是一个纯前端个人项目,所有的数据都是用 mockjs 模拟生成。它的原理是: 拦截了所有的请求并代理到本地,然后进行数据模拟,所以你会发现
network
中没有发出任何的请求。
但它的最大的问题是就是它的实现机制。它会重写浏览器的XMLHttpRequest
对象,从而才能拦截所有请求,代理到本地。大部分情况下用起来还是蛮方便的,但就因为它重写了XMLHttpRequest
对象,所以比如progress
方法,或者一些底层依赖XMLHttpRequest
的库都会和它发生不兼容,可以看一下我项目的issues,就知道多少人被坑了。
它还有一个问题是,因为是它本地模拟的数据,实际上不会走任何网络请求。所以本地调试起来很蛋疼,只能通过console.log
来调试。就拿vue-element-admin
来说,想搞清楚getInfo()
接口返回了什么数据,只能通过看源码或者手动Debug
才能知道。
在讲mock-server
移植过来的时候遇见了挺多坑的,于是写下来做个记录。
vue-element-admin中的mock-server
先来看看再vue-element-admin是如何使用mock-server
的。
从官方文档中可知在vue.config.js
文件中大概39行
before: require('./mock/mock-server.js')
这里通过webpack-dev-serve
导入了mock-server
而本地的Mockjs服务在main.js中
if (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../mock')mockXHR()
}
通过判断环境来进行切换。
整个mock的文件都在./mock
目录下。到这里可以发现整个mock-server
和项目的耦合度是十分的低的,移植难度应该不大。
将mock-server移植到Quasar
新建Quasar项目的时候我是使用Quasar CLI创建的,至于使用Vue CLI的同学把上面提到的原样复制过去就可以。
首先把vue-element-admin的mock目录下的文件复制到你的项目中。
先来看看vue.config.js
,在Quasar CLI中是没有这个配置文件的,取而代之的是quasar.conf.js文件,在这里面一样是有devServer的,直接加入
devServer: {https: false,port: 9557,open: true, // opens browser window automaticallybefore: require('./mock/mock-server.js')},
然后我们去找下main.js文件,似乎Quasar没有这个文件,查阅文档发现https://quasar.dev/quasar-cli/boot-files原来Quasar把main.js剥离成boot文件了,那么好吧,我们在./src/boot
目录下新建一个mock.js文件:
export default async (/* { app, router, Vue ... } */) => {if (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../../mock')mockXHR()}
}
回到quasar.conf.js中把mock加入启动项:
module.exports = function (ctx) {return {boot: ['mock'],
理论上至此应该成功了才对,但是每次都是404.。。。。。
这个问题排查了大半天,最后定位到mock-server.js文件内获取环境变量不能正常获取,通过官方的conf配置环境变量后也无法获得,使用了两个官方插件 @quasar/dotenv or @quasar/qenv,@quasar/dotenv可以在mock-server.js中获取到变量,但是我在设置axios的时候又无法获取到变量,而@quasar/qenv却相反,这里可能是因为一个环境是开发编译的的一个浏览器的,两者环境变量独立分开(这里只是猜测,还希望有大佬具体讲解下)。
当然比较粗暴的方法是直接把process.env.VUE_APP_BASE_API改成你要mock的路径。。当然这种方法太不优雅了,最终决定使用cross-env直接在package.json里面设置环境变量,在scripts里面添加:
"dev": "cross-env BASE_API=/api quasar dev","dev:remote": "cross-env BASE_API=http://localhost:8080/api quasar dev",
分别为不同的mock服务器默认dev是使用mock-server。
直接设置似乎axios里面又不能获取,最后打印发现,本地的环境变量还传不到。。。。。
最后还需要再quasar.conf.js中添加设置
env: {BASE_API: process.env.BASE_API},
再mock-server.js和axios中也都使用该变量。
移植好的项目在https://github.com/CCChieh/quasar-mockjs-example
相关资料
vue-element-admin
Quasar
设置 mock_Quasar 使用 Mock.js相关推荐
- vue-vue项目中mock.js的使用
mock.js 官网地址:mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返 ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
- Vue3项目 --- Mock.js模拟数据测试
1. npm 安装Mock.js npm install mockjs 2. Main.js中引入Mock import Mock from 'mockjs' require('./mock') cr ...
- Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
- Mock.js和axios在vue-cli创建项目中的使用
背景 由于大觅项目采用的是前后端完全分离的方式,实现前后端环境的分离开发,这样不仅能提高开发效率,还能减少服务器直接的互相影响,同时能保证数据安全等.但是随之而来的问题也比较明显,前端如何进行快速的开 ...
- 详解vue-element-admin 使用mock.js动态模拟数据
大家好,我是一条肥鲶鱼. 提示:胆小慎入 文章目录 大家好,我是一条肥鲶鱼. 前言 一.mock.js 1.为什么使用mock.js 2.mock-server.js的出现 二.使用步骤 1.开发环境 ...
- Mock.js 使用
模拟数据 设置迟延时间 我们可以使用 Mock.setup 来设置模拟数据时的延迟时间,单位:毫秒.可以设置一个固定的时间,也可以使用-设置一个时间段: // 延迟4秒 Mock.setup({tim ...
- Mock.js有什么用
Mock.js有什么用 下载印象笔记 Mock.js有什么用 Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊 ...
- mock.js教程 2017-02-08 15:02:39| 分类: 浏览器调试|举报|字号 订阅 下载LOFTER我的照片书 | 由于近期项目需求改动比较大,对于数据的频繁
mock.js教程 2017-02-08 15:02:39| 分类: 浏览器调试|举报|字号 订阅 下载LOFTER我的照片书 | 由于近期项目需求改动比较大,对于数据的频繁更改的问题,我发现了一 ...
最新文章
- 风控算法干货交流来了!
- 【转】如何使用VS 2013发布一个可以在Windows XP中独立运行的可执行文件
- WordPress3.5安装出现的几个问题
- GitHub中的奇葩项目:登顶过趋势榜的女装大佬项目
- Markdown的基本语法
- 【定区管理功能】定区列表分页条件查询
- html中css信封怎么表示,CSS3信封形状
- Tomcat自定义部署
- 想学编程一定要看的文章,你真的了解编程吗?
- C#(int)中Convert、Parse、TryParse的区别
- 研发思维09----嵌入式智能产品开发经过思考
- 1338: 不及格率
- word模板动态填充并下载
- 分布式优化算法学习(一)
- springboot整合liquibase(补充)
- 计算机科学引论2021英文,计算机科学引论= Computer Science Illuminated : 第3版 : 英文...
- 国密学习笔记 对称密码算法
- 计算机高级语言与型号是否有关,高级语言与cPU型号无关吗?
- 字典排序什么意思_字典序排序
- 第一章 05 Rim 边缘光
热门文章
- C#LeetCode刷题之#682-棒球比赛(Baseball Game)
- os.path vs pathlib
- python标准库之socket
- 初级开发人员的缺点_如何避免我作为初级开发人员犯的这7个错误
- 如何在React Native中创建精美的动画加载器
- 我如何构建SiriWaveJS库:看一下数学和代码
- 如何遍历JavaScript中的对象
- web安全检查_如何利用现代Web检查器的功能
- 124_Power PivotPower BI DAX优化计算最大连续次数
- linux怎么打开pak文件怎么打开,在elementary OS系统中开启Flatpak应用程序支持