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

2024-09-27 07:22:43

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

说下原因

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

解决方案

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

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

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

第二步、我们在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）新建一个按钮控件，绑定一个点击事件

安装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-cli 本地开发mock数据使用方法

vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章:Vue-cli proxyTable 解决开发环境的跨域问题如果后端接口尚未开发完成,前端开发一般使用mock数据. mock方法有多种多样,这里给出两种: 方法一: 使用express搭建静态服务 mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上. 具体方法: 创建 mock 文件夹 build/dev-server.js 中添加如下代码 np
vue项目中mock.js的使用及基本用法

官方网址:http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据. 使用方式这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程. vue-cli搭建项目后,安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹,来设
vue项目中如何使用mock你知道吗

目录第一步: 第二步,在request.js中进行相关配置,request.js代码如下: 第三步,在mock.js中进行相关配置,mock.js代码如下: 第四步,在main.js中需引入mock.js即可第五步,在页面中使用总结 Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据模拟 Ajax 请求,生成并返回模拟数据基于 HTML 模板生成模拟数据第一步: npm install mock
Vue项目中使用mock.js的完整步骤

在Vue项目中使用mock.js 开发工具选择:Vscode 1. 使用命令行创建vue项目(手动选择Babel,Router,Vuex) 2. 导入element-ui(为了显示效果好一点),命令行输入 npm i element-ui -S 3.在main.js中进行引用 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入 Vue.use(ElementUI)
vue中控制mock在开发环境使用,在生产环境禁用方式

目录 vue控制mock在开发环境使用,在生产环境禁用说下原因解决方案 vue中使用mock(常用方式) 前期准备安装axios和mock.js插件在main.js中引入编写mock.js 调用成功 vue控制mock在开发环境使用,在生产环境禁用说下原因 mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据. 解决方案第一步.我们设置mock在开发developm
Vue中控制v-for循环次数的实现方法

在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数 2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3" 在标签下紧跟v-if来进行控制,这里是用索引来进行控制的,所以循环的时候记得把i
python中的mock接口开发示例详解

什么是mock? mock在翻译过来有模拟的意思.它允许您用模拟对象替换您的系统的部分,并对它们已使用的方式进行断言. Mock通常是指,在测试一个对象时,我们构造一些假的对象来模拟与其交互.而这些Mock对象的行为是我们事先设定且符合预期.通过这些Mock对象来测试对象在正常逻辑,异常逻辑或压力情况下工作是否正常,Mock的行为固定,它确保当你访问该Mock的某个方法时总是能够获得一个没有任何逻辑的直接就返回的预期结果.Mock接口就是用一些合理的手段构造对象去模拟真实接口. import f
vue中watch的实际开发学习笔记

目录前言一.watch是什么二.watch不同的实际使用场景开发案例 1.场景1:加载完成后登录监听 2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容 3.场景3:深度监听 4.场景4:赋值使用 5.场景5:改变标记的true和false 6.场景6:页面的跳转补充:watch简写形式总结前言本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验. 一.watch是什么根据本人的理解,它就是一个监听器,就是说监听的某个数据发生了变化,那么它就会执行相对
vue中多路由表头吸顶实现的几种布局方式

vue项目多路由表头吸顶实现的几种布局方式因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头吸顶,所以尝试用vux做这种需求, 一.先聊js. A.首先在vux可以这样设置. 1.在state文件中设置状态. techo:{ partsFixed:false, repairFixed:false, mateFixed:false, outRepairFixed:false }//吸顶状态 2.在action中commi
vue中怎么区分不同的环境

目录如何区分不同环境方式一.手动修改不同的变量方式二.使用process.env.NODE_ENV来区分方式三.编写不同的环境变量配置文件 vue配置不同环境需要配置以下文件如何区分不同环境我们在vue开发中常常要根据不同的环境区分不同的变量,常见的环境有如下几种: 生产环境:production, 开发环境:development, 测试环境:test. 方式一.手动修改不同的变量 const BASE_URL = 'http://dlfordmc.org/dev' const
vue中Axios的封装和API接口的管理示例详解

目录一.axios的封装安装引入环境的切换设置请求超时 post请求头的设置请求拦截响应的拦截封装get方法和post方法 axios的封装基本就完成了,下面再简单说下api的统一管理. 2018.8.14更新我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js
vue中axios请求的封装实例代码

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理安装 npm i axios 封装我把axios请求封装在http.js中,重新把get请求,post请求封装了一次首先,引入axios import axios from 'axios' 设置接口请求前缀一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用
详解vue中axios请求的封装

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理安装 npm i axios 封装我把axios请求封装在http.js中,重新把get请求,post请求封装了一次首先,引入axios import axios from 'axios' 设置接口请求前缀一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用