vue3工具

1.axios请求封装

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';

import { ElMessage } from 'element-plus'
//定义一个变量,记录公共的前缀  ,  baseURL
//const baseURL = 'http://localhost:8080';
const baseURL = '/api';
const instance = axios.create({ baseURL })


//添加请求拦截器
instance.interceptors.request.use(
    (config)=>{
        //请求前的回调
        //添加token
        const tokenStore = JSON.parse(localStorage.getItem("honey-user"));
        //判断有没有token
        if(tokenStore.token){
            config.headers.Authorization = tokenStore.token
        }
        return config;
    },
    (err)=>{
        //请求错误的回调
		ElMessage.error('请先登录')
		router.push('/login')
        Promise.reject(err)
    }
)

/* import {useRouter} from 'vue-router'
const router = useRouter(); */

import router from '@/router'
//添加响应拦截器
instance.interceptors.response.use(
    result => {
        //判断业务状态码
        if(result.data.code===0){
			console.log(result.data)
            return result.data;
        }

        //操作失败
        //alert(result.data.msg?result.data.msg:'服务异常')
        ElMessage.error(result.data.msg?result.data.msg:'服务异常')
        //异步操作的状态转换为失败
        return Promise.reject(result.data)
        
    },
    err => {
        //判断响应状态码,如果为401,则证明未登录,提示请登录,并跳转到登录页面
        if(err.response.status===401){
            ElMessage.error('请先登录')
            router.push('/login')
        }else{
            ElMessage.error('服务异常')
        }
       
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

2.路径解析和代理转发

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
	  'highlight.js': 'highlight.js',
	        'wangeditor': 'wangeditor'
    }
  },
  server:{
    proxy:{
      '/api':{//获取路径中包含了/api的请求
          target:'http://localhost:8081',//后台服务所在的源
          changeOrigin:true,//修改源
          rewrite:(path)=>path.replace(/^\/api/,'')///api替换为''
      }
    }
  }
})

3.路由配置

import {createRouter,createWebHistory} from 'vue-router'
import Home from  '@/views/Home.vue'
import Login from  '@/views/Login.vue'
import Header from '@/views/header/header.vue'
import Main from '@/views/main/main.vue'
import AboutUs from '@/views/main/aboutUs/aboutUs.vue'
import Competition from '@/views/main/competition/competition.vue'
import LearningPath from '@/views/main/learningPath/learningPath.vue'
import Resources from '@/views/main/resources/resources.vue'
import Detail from '@/views/main/learningPath/detail/detail.vue'
const router=createRouter({
	history:createWebHistory(import.meta.env.BASE_URL),
	routes:[
	{path:'/a',name:"",component:Home},
	{path:'/',name:"",component:Login},
	{path:'/header',name:"",component:Header},
	{path:'/s',name:"",component:Home,redirect:'/main',children:[
		{path:'/main',name:"",component:Main},
		{path:'/main/aboutUs',name:"",component:AboutUs},
		{path:'/main/competition',name:"",component:Competition},
		{path:'/main/learningPath',name:"",component:LearningPath},
		{path:'/main/learningPath/detail',name:"",component:Detail},
		{path:'/main/resources',name:"",component:Resources}
	]}
	]
})


export default router; // 确保有正确的默认导出