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切换环境和打包之后服务器配置相关推荐

  1. vue-cli中webpack配置之webpack.prod.conf.js

    配置内容 var path = require('path') var utils = require('./utils') var webpack = require('webpack') var ...

  2. win10运行vue项目_vue+webpack在window10环境下搭建及遇到的问题

    首先我搭建vue+webpack+vue-strap+vue-route+sass时,我用的是直接在项目中的package.json中的"devDependencies"直接将直接 ...

  3. (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

    (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换 1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.jso ...

  4. Webpack配置区分开发环境和生产环境

    在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...

  5. Webpack配置vue打包环境时报错

    Webpack配置vue打包环境时报错,大片飘红 头都大了- ERROR in ./src/App.vue Module build failed (from ./node_modules/_vue- ...

  6. 干货! 快速上手typescript的学习笔记 (对比JS的新特性,环境搭建,webpack配置,ts编译配置)

    前提需要有js的基础 文章目录 TypeScript 产生背景 什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建 基本类型 编译文件配置 tsconfig ...

  7. nuxt webpack配置css,基于nuxt通过webpack配置ant-Design-vue的主题切换配置

    1.首先在nuxt官网初始化好基于ant-Design-vue的项目, 安装.png 选择ant-Design-vue UI框架 2.初始化完成,查找package.json是否安装了less与les ...

  8. umi 如何配置webpack_umi+dva开发环境+经常使用配置和webpack配置

    安装(官方文档:https://umijs.org/zh):javascript yarn global add umi 使用:css 使用umi -v可查看版本,确保全局安装没问题java umi ...

  9. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

最新文章

  1. 【转帖】Nginx优化use参数epoll,kqueue,rtsig,eventport,poll
  2. 改变vim注释的颜色
  3. C语言如何使用其他文件定义的结构体?(C++报错:无法转换到不完整的类【需在头文件中定义结构体??】)
  4. Android安全教程(2)---Fiddler简易使用教程之使用
  5. 字符串的长度超过了为 maxJsonLength 属性设置的值
  6. 揭秘微信「扫一扫」识物为什么这么快?
  7. WHU 1470 Join in tasks 水题
  8. Opencv---remap函数的实现
  9. [bzoj3676]回文串[后缀数组+Manacher]
  10. [转]MySQL索引背后的数据结构及算法原理
  11. 【干货】华为管理干部内部资料:华为管理者应知应会之咨询方法论.pdf(附下载链接)...
  12. 前端两种播放视频的方式
  13. docker安装gamit_Ubuntu Linux下安装GAMIT
  14. discuz模板风格制作入门
  15. 远程桌面连接如何重启计算机,如何使用“远程桌面连接”连接到另一台计算机...
  16. mac中clion无法运行
  17. MAF-YOLO: Multi-modal attention fusion based YOLO forpedestrian detection
  18. KPM算法详解(Next数组)
  19. 如何使用OBS 进行屏幕录制
  20. cmd 下删除mysql 服务命令

热门文章

  1. 掌握穷变富的12条原则 迅速从普通人变成有钱人
  2. mybatis 中 Example 的使用 :条件查询、排序、分页(三种分页方式 : RowBounds、PageHelpler 、limit )
  3. 超简单方法: Intellij Idea 把 java 工程打成可运行的 jar
  4. 日常问题 - 远程服务器运行Tomcat出现卡顿阻塞
  5. MyEclipse 皮肤、主题、背景色
  6. 部署WEB项目到服务器(三)安装mysql到linux服务器(Ubuntu)详解
  7. Request的getHeader()和getParameter()的区别
  8. 高效管理ASP.NET的JavaScript库
  9. T-SQL DML学习笔记
  10. CodeSmith终极玩法