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。