vue控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用

說下原因

mock攔截所有的axios請(qǐng)求，根據(jù)請(qǐng)求，做出相應(yīng)的響應(yīng)。平時(shí)前后端分離開發(fā)，我們使用mock獲得相應(yīng)的數(shù)據(jù)，但當(dāng)和后端聯(lián)調(diào)的時(shí)候，不禁用mock，就無法獲得后端數(shù)據(jù)。

解決方案

第一步、我們?cè)O(shè)置mock在開發(fā)development環(huán)境可用，在生產(chǎn)production環(huán)境不可用。

在vue中通過設(shè)置main.js中的Vue.config.productionTip來決定模式。

默認(rèn)為false是生產(chǎn)環(huán)境。我們將其設(shè)置為true即進(jìn)入了開發(fā)環(huán)境，設(shè)置后，可在瀏覽器檢查中看到Y(jié)ou are runing Vue in development mode如下圖：

第二步、我們?cè)赾onfig/dev.env.js和config/prod.env.js中設(shè)置變量。相當(dāng)于同一個(gè)變量名，在不同的模式下，有不同的值。

// dev.env.js下的配置。
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: true //開發(fā)環(huán)境使用mock
})
// prod.env.js下的配置
module.exports = {
  NODE_ENV: '"production"',
  MOCK: false // 生產(chǎn)環(huán)境禁用mock
}

同理，如果有其他在生產(chǎn)環(huán)境和開發(fā)環(huán)境取值不同的同名變量，可以定義在相應(yīng)的文件中，如在axios請(qǐng)求時(shí)，不同環(huán)境有不同的baseURL，即可以設(shè)置。

第三步、在main.js中設(shè)置process.env.MOCK && require("./mock/index.js")。process.env.MOCK這句就是判斷剛才設(shè)置的值，如果是true，才會(huì)執(zhí)行語句引入mock，如果是false，則后面的語句不執(zhí)行，即不引入mock。

vue中使用mock（常用方式） 

近期在學(xué)習(xí)Vue，碰到前端需要數(shù)據(jù)，自己手敲太麻煩，頁面也不美觀，于是想到了用mock。之前用過一次，但現(xiàn)在全忘了。所以在這里記錄一下，以備不時(shí)之需。本文從項(xiàng)目建好后一步一步進(jìn)行vue+mock的使用。

前期準(zhǔn)備

1）新建一個(gè)vue項(xiàng)目

2）將helloworld.vue的內(nèi)容刪除，便于后期調(diào)試

3）新建一個(gè)按鈕控件，綁定一個(gè)點(diǎn)擊事件

安裝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。代碼編寫詳細(xì)可參考mock.js官網(wǎng)

下面給出簡(jiǎn)單的示例代碼：

import Mock from 'mockjs'  // 引入mockjs
Mock.mock('/api/test',{
  data: {
    test: "test"
  }
})

調(diào)用

在helloworld中編寫點(diǎn)擊事件

 methods: {
    test(){
      this.$axios({
        method: 'get',
        url: "/api/test"
      }).then(function(response) {
        console.log(response)
      })
      .catch(function(error) {
          console.log(error);
        });
    }
}

成功

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。