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+element实现动态加载表单
Dec 13 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python常用的json标准库
2019/02/19 Python
如何理解Python中包的引入
2020/05/29 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
企业面试题试卷附带答案
2015/12/20 面试题
三分钟演讲稿事例
2014/03/03 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
最感人的道歉情书
2015/05/12 职场文书
追讨欠款律师函
2015/05/27 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android