vue中控制mock在开发环境使用,在生产环境禁用方式
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+element+electron仿微信实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
本文主要介绍了Vue新一代状态管理工具Pinia的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue项目实现背景颜色以及下划线从左到右渐变动画效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的。本文将通过示例为大家介绍下provide/inject的具体实现，需要的可以参考一下2022-11-11
这篇文章主要介绍了用vue 实现手机触屏滑动的功能，文中通过示例代码给大家介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue展示dicom文件医疗系统的实现代码，非常不错，具有一定的参考借鉴加载,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue在标签中如何使用(data-XXX)自定义属性并获取，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue el-upload单图片上传功能实现,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue 实现从小到大的横向滑动效果,结合实例形式详细分析了vue.js横向渐变滑动效果的实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下2019-10-10
最新评论