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打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
VUE递归树形实现多级列表
Jul 15 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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
js简易版购物车功能
2017/06/17 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Python字符遍历的艺术
2008/09/06 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python数据集切分实例
2018/12/08 Python
python读写配置文件操作示例
2019/07/03 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
自查自纠整改报告
2014/11/06 职场文书
七年级上册生物的课件
2019/08/07 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript