美文网首页饥人谷技术博客
生产环境和开发环境baseURL无缝切换

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

作者: 飞天小猪_pig | 来源:发表于2021-12-30 23:53 被阅读0次

    前端和后端做交互时候,当后端数据没有做好情况,我们在开发环境中需要自己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

    相关文章

      网友评论

        本文标题:生产环境和开发环境baseURL无缝切换

        本文链接:https://www.haomeiwen.com/subject/aydvtrtx.html