在这里,只有干货,直接上代码
request.js配置
// 导入axios
import axios from 'axios'
//1. 创建新的axios实例,
const service = axios.create({
// 公共接口--这里注意后面会讲
// baseURL: 'http://music.163.com', // 这个代码要注释掉,不然一直报跨域。坑了半天
// 超时时间 单位是ms,这里设置了3s的超时时间
timeout: 3 * 1000,
})
// 2.请求拦截器
service.interceptors.request.use(
(config) => {
//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
}
//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie
// const token = 'xxx' //这里取token之前,你肯定需要先拿到token,存一下
// if (token) {
// config.params = {
// Token: token,
// userId: 'xxx',
// } //如果要求携带在参数中
// config.headers.token = token //如果要求携带在请求头中
// }
return config
},
(error) => {
Promise.reject(error)
}
)
// 3.响应拦截器
service.interceptors.response.use(
(response) => {
//接收到响应数据并成功后的一些共有的处理,关闭loading等
return response
},
(error) => {
/***** 接收到异常响应的处理开始 *****/
if (error && error.response) {
// 1.公共错误处理
// 2.根据响应码具体处理
switch (error.response.status) {
case 400:
error.message = '错误请求'
break
case 401:
error.message = '未授权,请重新登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '请求错误,未找到该资源'
window.location.href = '/NotFound'
break
case 405:
error.message = '请求方法未允许'
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器端出错'
break
case 501:
error.message = '网络未实现'
break
case 502:
error.message = '网络错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网络超时'
break
case 505:
error.message = 'http版本不支持该请求'
break
default:
error.message = `连接错误${error.response.status}`
}
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
alert('服务器响应超时,请刷新当前页')
}
error.message = '连接服务器失败'
}
alert(error.message)
/***** 处理结束 *****/
//如果不需要错误处理,以上的处理过程都可省略
return Promise.resolve(error.response)
}
)
//4.导入文件
export default service
http.js配置
/**** http.js ****/
// 导入封装好的axios实例
import request from './request'
const http = {
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url, params) {
const config = {
method: 'get',
url: url,
}
if (params) config.params = params
return request(config)
},
post(url, params) {
const config = {
method: 'post',
url: url,
}
if (params) config.data = params
return request(config)
},
put(url, params) {
const config = {
method: 'put',
url: url,
}
if (params) config.params = params
return request(config)
},
delete(url, params) {
const config = {
method: 'delete',
url: url,
}
if (params) config.params = params
return request(config)
},
}
//导出
export default http
路由index.ts配置
import {
createRouter,
createWebHashHistory,
createWebHistory,
ErrorHandler,
} from 'vue-router'
// 引入路由守卫方法
import beforeEach from './beforeEach'
import afterEach from './afterEach'
const home = () => import('../components/Home.vue')
const login = () => import('../components/Login.vue')
const page404 = () => import('../components/404.vue')
const routes = [
{ path: '/', redirect: '/login' },
{
path: '/login',
name: 'login',
component: login,
},
{
path: '/home',
name: 'home',
component: home,
},
{
path: '/404',
name: '404',
component: page404,
},
]
const router = createRouter({
history: createWebHashHistory(),
// history: createWebHistory('/'),
routes: routes,
})
/**
* 路由前置守卫
*/
router.beforeEach((guard) => {
beforeEach.checkAuth(guard, router)
})
/**
* 路由后置守卫
*/
router.afterEach((guard) => {
afterEach.buriedPoint(guard, router)
})
/**
* 路由错误回调
*/
router.onError((handler: ErrorHandler) => {
console.log('error:', handler)
})
/**
* 输出对象
*/
export default router
afterEach.ts路由后置守卫埋点配置
import { Router } from 'vue-router'
import http from '../utils/http.js'
export default {
/**
* 路由守卫埋点统计
* @param guard
* @param router
*/
buriedPoint(guard: any, router: Router) {
http.get('/api/song/detail/?id=31445554&ids=[31445554]').then((res) => {
console.log(guard.name + '埋点')
console.log(res.data)
})
},
}
vite.config.ts代理配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
export default defineConfig({
plugins: [vue()], // 配置需要使用的插件列表,这里将vue添加进去
// 打包配置
build: {
target: 'modules',
outDir: 'dist', //指定输出路径
assetsDir: 'assets', // 指定生成静态资源的存放路径
minify: 'terser', // 混淆器,terser构建后文件体积更小
},
alias: {
// 键必须以斜线开始和结束
'/@/': path.resolve(__dirname, './src'),
},
// 本地运行配置,及反向代理配置
server: {
cors: true, // 默认启用并允许任何源
open: true, // 在服务器启动时自动在浏览器中打开应用程序
proxy: {
'/api': {
target: 'http://music.163.com', //代理接口
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
},
},
})
引入Js时如果报错,则在tsconfig.json中加入"noImplicitAny": false