vue3.0新建项目二次封装axios,配置本地代理。
1、在src文件夹中创建http文件夹并新建http.js和api.js,并在更目录创建vue.config.js文件
2、配置http.js文件
如果没有安装axios,首先安装axios
cnpm install axios -S
// 一、配置axios
import axios from 'axios'
// import store from '@/store/index' 如果使用vuex,那么token,userinfo都可以在登录以后存储到store中,不需要使用storage
// 获取浏览器的接口地址。
let baseUrl = window.location.origin
// axios配置
axios.defaults.baseURL = baseUrl
// 设置请求最大时长
axios.defaults.timeout = 50000
axios.defaults.withCredentials = true
// 请求拦截器,设置token
axios.interceptors.request.use(config => {
if (localStorage && localStorage.getItem('token')) {
const token = localStorage.getItem('token')
token && (config.headers.Authorization = token)
}
return config
}, error => {
// 可以安装elementui等ui组件,将错误信息输出到界面。
console.log(error)
return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {
if (response.status === 200) {
// 993登录过期
if (response.data.code !== '993') {
return Promise.resolve(response)
} else {
console.log('登录过期')
// store.commit('clearUserInfo') // 使用vuex存储过用户信息,这里需要清空一下。
window.location.href = '/#/login'
}
} else {
return Promise.reject(response)
}
})
// 2、封装请求方式
// @param url 接口地址
// @param data 携带参数
// @param file 上传文件对象
// @param auth 是否携带token
// get请求
export function get (url, data) {
return axios.get(url, data)
}
// post请求
export function post (url, data) {
return axios.post(url, data)
}
// put请求
export function put (url, data) {
return axios.put(url, data)
}
// delete 请求
export function del (url, data) {
return axios.delete(url, data)
}
// upload 请求
export function uploader (url, file) {
let params = new FormData()
params.append('file', file)
return axios.post(url, params)
}
3、配置api.js文件
// 封装后台接口方法
import { get, post, put, del, uploader } from './http'
export const LOGIN = (params) => get('service-core/wechat/serviceAccount/qrCode/create', params, false)
export const REGISTER = (params) => put('service-core/user_register', params, false)
export const USER_LIST = (params) => post('service-core/user_list', params)
export const USER_LIST_ID = (params) => get(`service-core/user_list/${params.id}`)
export const UPLOAD_USER_CARD = (params) => uploader('service-core/user_upload_card', params)
export const DELETE_BOOK = (params) => del(`service-core/book_list/${params.id}`)
4、在组件中使用接口
import { LOGIN } from '../http/api'
export default {
name: 'HelloWorld',
props: {
msg: String
},
setup () {
onMounted (() => {
LOGIN({username: 'zhangxuchao', password: '123456'}).then(res => {
console.lo(res)
})
})
}
}
5、配置代理 vue.config.js
module.exports = {
// 基本路径
publicPath: './',
// build后默认路径
baseUrl: './',
// 构建时的输出目录
outputDir: 'dist',
// 放置静态资源的目录
assetsDir: 'static',
// html 的输出路径
indexPath: 'index.html',
//文件名哈希
filenameHashing: true,
// 是否在保存的时候使用 `eslint-loader` 进行检查。
lintOnSave: true,
// 是否使用带有浏览器内编译器的完整构建版本
runtimeCompiler: false,
// babel-loader 默认会跳过 node_modules 依赖。
transpileDependencies: [ /* string or regex */ ],
// 是否为生产环境构建生成 source map?
productionSourceMap: false,
// 设置生成的 HTML 中 <link rel='stylesheet'> 和 <script> 标签的 crossorigin 属性。
crossorigin: '',
// 在生成的 HTML 中的 <link rel='stylesheet'> 和 <script> 标签上启用 Subresource Integrity (SRI)。
integrity: false,
// 调整内部的 webpack 配置
configureWebpack: () => {}, //(Object | Function)
chainWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: true,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
// 接口地址代理
'/service-core': {
target: 'https://www.zhangxuchao.com', // 接口的域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: { "^/service-core": "service-core" }
},
//微信二维码登录
"/wechat": {
target: "https://www.eastgrain.cn/service-core",
secure: false,
changeOrigin: true,
pathRewrite: { "^/wechat": "" }
}
}
},
// 三方插件的选项
pluginOptions: {
// ...
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。