1、根目录底下新建.env.dev
和env.prod
,内容如下:
VUE_APP_BASE_API = 'http://192.168.1.xx:xxx'
2、vue.config相关内容:
devServer: {
hot: true, //热加载
host: '0.0.0.0' ,
port: 8080 , //端口
// https: false, //false关闭https,true为开启
// open: true, //自动打开浏览器
proxy: {
// 在此处为需要解决跨域的 API 配置代理
'/api' : {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
rewrite: path = > path.replace( /^\ /api/, '' ) // 去掉 /api 前缀
}
}
}
3、package.json内容修改如下
"scripts" : {
"serve" : "vue-cli-service serve --mode dev" ,
"build" : "vue-cli-service build --mode prod" ,
"lint" : "vue-cli-service lint"
} ,
5、axios封装
import axios from 'axios'
const service = axios.create( {
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
} )
// console.log( process.env.VUE_APP_BASE_API)
// 请求拦截器
service.interceptors.request.use(
config = > {
// 添加请求头等前置处理
config.headers[ 'Authorization' ] = 'Bearer' + ' ' + localStorage.getItem( 'token' )
return config
} ,
error = > {
// 请求错误处理
console.log( 'Request Error:' , error)
return Promise.reject( error)
}
)
// 响应拦截器
service.interceptors.response.use(
response = > {
// 响应后处理
if ( response.status == = 200 && response.data.code == = 200 ) {
return Promise.resolve( response.data.data)
} else {
return Promise.reject( response.data)
}
} ,
error = > {
console.log( 'Response Error:' , error)
return Promise.reject( error)
}
)
export default service