这篇文章主要介绍“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的使用。
1)新建一个vue项目
2)将helloworld.vue的内容删除,便于后期调试
3)新建一个按钮控件,绑定一个点击事件
使用npm方式安装
// 安装axios插件 npm install axios --save // 安装mockjs插件 npm install mockjs --save-dev
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 // 新增
在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在开发环境使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。