饥人谷技术博客

生产环境和开发环境baseURL无缝切换

2021-12-30  本文已影响0人  飞天小猪_pig

前端和后端做交互时候,当后端数据没有做好情况,我们在开发环境中需要自己mock数据(mock假数据,模拟开发),这个时候mock的数据可能是本地的或者其他接口的。但是当我们在生产环境测试时需要切换成后端给到的接口。这时我们设置的baseURL就需要不断修改,切换。我们可以在一开始就设置好生产环境和开发环境的baseURL,让他们自动满足我们在不同环境测试要求,不再需要改动。

一、在build目录中新建名字为mock.config.js文件

const fs=require('fs')
const path=require('path')

const mockBaseURL = 'https://localhost:3000'   //本地测试接口
const realBaseURL = 'https://note-server.hunger-valley.com'   //后端提供的接口

exports.config=function({ isDev = true } = { isDev: true}){
    let fileTxt = `
    module.exports = {
      baseURL: '${isDev ? mockBaseURL : realBaseURL}'
    }
    `
   fs.writeFileSync(path.join(__dirname, '../src/helpers/config-baseURL.js'), fileTxt)

}

二、在开发环境文件build>webpack.dev.conf.js文件加上这句

require('./mock.config').config({ isDev: true })

三、在生产环境文件build>webpack.prod.conf.js文件加上这句

require('./mock.config').config({ isDev: false })

四、最后在你的请求内容中添加和修改baseURL来源

import baseURLConfig from './config-baseURL'

axios.defaults.baseURL=baseURLConfig.baseURL
上一篇下一篇

猜你喜欢

热点阅读