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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue3获取当前路由地址
Feb 18 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函数实现判断是否移动端访问
2015/03/03 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php数组遍历类与用法示例
2019/05/24 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python 实现倒排索引的方法
2018/12/25 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
高二学生评语大全
2014/04/25 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
公司离职证明标准样本
2014/10/05 职场文书
学校食品安全责任书
2015/01/29 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
Nebula Graph解决风控业务实践
2022/03/31 MySQL