vue3.0新建我的项目二次封装axios，配置本地代理。
1、在src文件夹中创立http文件夹并新建http.js和api.js，并在更目录创立vue.config.js文件
2、配置http.js文件
如果没有装置axios，首先装置axios
cnpm install axios -S// 一、配置axiosimport 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 = 50000axios.defaults.withCredentials = true// 申请拦截器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, auth=true) { if (auth) { return axios.get(url, data, { headers: {Authorization: localStorage.getItem('token')}}) } else { return axios.get(url) }}// post申请export function post (url, data, auth=true) { if (auth) { return axios.post(url, data, {header: {Authorization: localStorage.getItem('token')}}) } else { return axios.post(url, data) }}// put申请export function put (url, data, auth=true) { if (auth) { return axios.put(url, data, {header: {Authorization: localStorage.getItem('token')}}) } else { return axios.put(url, data) }}// delete 申请export function del (url, data, auth=true) { if (auth) { return axios.delete(url, data, { headers: {Authorization: localStorage.getItem('token')}}) } else { return axios.delete(url) }}// upload 申请export function uploader (url, file, auth=true) { let params = new FormData() params.append('file', file) if (auth) { return axios.post(url, params, {header: {Authorization: localStorage.getItem('token')}}) } else { 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: { // ... }}