vuex webpack 配置_vue+webpack切换环境和打包之后服务器配置
import axios from ‘axios‘
import store from ‘../store/index‘
const rootUrl =process.env.API_ROOT//創建axios實例
const service =axios.create({
timeout:30000 //超時時間
})//添加request攔截器
service.interceptors.request.use(config =>{if (Object.keys(config.headers).length > 0) {
}//console.log(‘headers‘ + config.headers)
returnconfig
}, error=>{
Promise.reject(error)
})//添加response攔截器
service.interceptors.response.use(
response=>{
let res={}
res.status=response.status
res.data=response.data
res.headers=response.headers//console.log(‘####‘ + JSON.stringify(response.data))
returnres
},
error=>{if (error.response && error.response.status === 404) {
console.log(‘404錯誤‘)
}returnPromise.reject(error.response)
}
)//封裝get接口//params={} 是設置默認值
export function get(url, params = {}, header ={}) {
params.t= new Date().getTime() //get方法加一個時間參數,解決ie下可能緩存問題.
returnservice({
url: url,
method:‘get‘,
headers: header,
params
})
}//封裝post請求
export function post(url, data = {}, header ={}) {//默認配置
let sendObject ={
url: url,
method:‘post‘,
headers: header,
data: data
}
sendObject.data=JSON.stringify(data)returnservice(sendObject)
}//封裝put方法 (resfulAPI常用)
function put(url, data = {}, header ={}) {returnservice({
url: url,
method:‘put‘,
headers: header,
data: JSON.stringify(data)
})
}//刪除方法(resfulAPI常用)
function deletes(url, header ={}) {returnservice({
url: url,
method:‘delete‘,
headers: header
})
}//patch方法(resfulAPI常用)
function patch(url, header ={}) {returnservice({
url: url,
method:‘patch‘,
headers: header
})
}//處理格式化URL(/demo/{id})
function render(url, data) {
var re= /{([^]+)?}/var match= ‘‘
while ((match =re.exec(url))) {
url= url.replace(match[0], data[match[1]])
}returnurl
}const fetch = (options) =>{
let url=options.url
url=render(url, options.data)switch(options.method.toUpperCase()) {case ‘GET‘:returnget(url, options.data, options.header)case ‘POST‘:returnpost(url, options.data, options.header)case ‘PUT‘:returnput(url, options.data, options.header)case ‘DELETE‘:returndeletes(url, options.data, options.header)case ‘PATCH‘:returnpatch(url, options.data, options.header)default:returnservice(options)
}
}/*** 提供一個http方法
* url 訪問路徑 不包括域名和項目名
* data 參數對象
* method 請求方式
**/export function httpApiTools(url= ‘‘, body = {}, header = {}, method = ‘GET‘) {
var newUrl= rootUrl +urlif (Object.keys(store.state.serverConfig).length > 0) {//上線后修改配置
console.log(‘store.state.serverConfig：‘ +store.state.serverConfig)
newUrl= store.state.serverConfig +url
}else{//上線前多服務器環境切換
console.log(‘store.state.serverConfig：‘ +store.state.serverConfig)
newUrl= rootUrl +url
}
console.log(‘請求路徑：‘ +newUrl)const options ={
url: newUrl,
data: body,
header: header,
method: method
}return fetch(options).catch(error =>{
console.log(error)throwerror
})
}/*** 構造url的方法*/export function getUrl(url= ‘‘) {//process.env.VUE_APP_PATH為環境變量在.env文件中配置
return process.env.VUE_APP_PATH +url
}
總結
以上是生活随笔為你收集整理的vuex webpack 配置_vue+webpack切换环境和打包之后服务器配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓微信自动抢红包插件优化和实现
- 下一篇： django 与 vue 的完美结合