vue中控制mock在开发环境使用,在生产环境禁用方式
时间：2022-06-28 09:17:35 | 栏目：vue | 点击：次
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);
});
}
}
成功
