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 18 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
同事打架检讨书
2014/02/04 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
党员个人对照检查材料
2014/10/01 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python