生产环境和开发环境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