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。