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如下圖:
development mode

第二步、我們在config/dev.env.jsconfig/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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章