vue中控制mock在开发环境使用,在生产环境禁用方式


Posted in Vue.js onApril 06, 2022

vue控制mock在开发环境使用,在生产环境禁用

说下原因

mock拦截所有的axios请求,根据请求,做出相应的响应。平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据。

解决方案

第一步、我们设置mock在开发development环境可用,在生产production环境不可用。

在vue中通过设置main.js中的Vue.config.productionTip来决定模式。

默认为false是生产环境。我们将其设置为true即进入了开发环境,设置后,可在浏览器检查中看到You are runing Vue in development mode如下图:

vue中控制mock在开发环境使用,在生产环境禁用方式

第二步、我们在config/dev.env.js和config/prod.env.js中设置变量。相当于同一个变量名,在不同的模式下,有不同的值。

// dev.env.js下的配置。
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: true //开发环境使用mock
})
// prod.env.js下的配置
module.exports = {
  NODE_ENV: '"production"',
  MOCK: false // 生产环境禁用mock
}

同理,如果有其他在生产环境和开发环境取值不同的同名变量,可以定义在相应的文件中,如在axios请求时,不同环境有不同的baseURL,即可以设置。

第三步、在main.js中设置process.env.MOCK && require("./mock/index.js")。process.env.MOCK这句就是判断刚才设置的值,如果是true,才会执行语句引入mock,如果是false,则后面的语句不执行,即不引入mock。

vue中使用mock(常用方式) 

近期在学习Vue,碰到前端需要数据,自己手敲太麻烦,页面也不美观,于是想到了用mock。之前用过一次,但现在全忘了。所以在这里记录一下,以备不时之需。本文从项目建好后一步一步进行vue+mock的使用。

前期准备

1)新建一个vue项目

2)将helloworld.vue的内容删除,便于后期调试

3)新建一个按钮控件,绑定一个点击事件

vue中控制mock在开发环境使用,在生产环境禁用方式

安装axios和mock.js插件

使用npm方式安装

// 安装axios插件
npm install  axios --save
// 安装mockjs插件
npm install mockjs --save-dev

在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from 'axios'             // 新增
Vue.prototype.$axios = axios    // 新增

编写mock.js

在src下新建mock文件,并新建文件mock.js。代码编写详细可参考mock.js官网

下面给出简单的示例代码:

import Mock from 'mockjs'  // 引入mockjs
Mock.mock('/api/test',{
  data: {
    test: "test"
  }
})

调用

在helloworld中编写点击事件

methods: {
    test(){
      this.$axios({
        method: 'get',
        url: "/api/test"
      }).then(function(response) {
        console.log(response)
      })
      .catch(function(error) {
          console.log(error);
        });
    }
}

成功

vue中控制mock在开发环境使用,在生产环境禁用方式

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue3使用vuedraggable实现拖拽功能
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
教你部署vue项目到docker
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
You might like
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php实现短信发送代码
2015/07/05 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
Numpy掩码式数组详解
2018/04/17 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
详解python UDP 编程
2020/08/24 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
银行求职推荐信范文
2013/11/30 职场文书
公司培训欢迎词
2014/01/10 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
公司放假通知范文
2015/04/14 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
Python之基础函数案例详解
2021/08/30 Python
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python