vite创建基本项目架构

参考vite官网:https://cn.vitejs.dev/guide/

1.初始化

升级最新版本：npm install vue@next

创建名为'test'的项目：npm init vite-app test

2.下载依赖 运行

npm install
npm run dev

3.加入ip登录

4.依赖vue-router
参考博客:https://juejin.cn/post/7001857870035681316

npm install vue-router@4.0 

创建src/router/index.ts文件，配置路由

import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  // 指定路由模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

5.添加依赖vuex
创建src/store/index.ts，配置vuex

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'vueX'
  }
})

6.添加依赖axios

// http/index.js
import axios from 'axios'
import {
    ElLoading,
    ElMessage
} from 'element-plus';
//创建axios的一个实例 
var instance = axios.create({
    baseURL: import.meta.env.VITE_APP_URL, //接口统一域名
    timeout: 6000, //设置超时
    headers: {
        'Content-Type': 'application/json;charset=UTF-8;',
    }
})
let loading;
//正在请求的数量
let requestCount = 0
//显示loading
const showLoading = () => {
    if (requestCount === 0 && !loading) {
        loading = ElLoading.service({
            text: "Loading  ",
            background: 'rgba(0, 0, 0, 0.7)',
            spinner: 'el-icon-loading',
        })
    }
    requestCount++;
}
//隐藏loading
const hideLoading = () => {
    requestCount--
    if (requestCount == 0) {
        loading.close()
    }
}

//请求拦截器 
instance.interceptors.request.use((config) => {
        showLoading()
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = window.localStorage.getItem('token');
        token && (config.headers.Authorization = token)
        //若请求方式为post，则将data参数转为JSON字符串
        if (config.method === 'POST') {
            config.data = JSON.stringify(config.data);
        }
        return config;
    }, (error) =>
    // 对请求错误做些什么
    Promise.reject(error));

//响应拦截器
instance.interceptors.response.use((response) => {
    hideLoading()
    //响应成功
    console.log('拦截器报错');
    return response.data;
}, (error) => {
    console.log(error)
    //响应错误
    if(error.response&&error.response.status){
	   const status = error.response.status
	    switch (status) {
	        case 400:
	            message = '请求错误';
	            break;
	        case 401:
	            message = '请求错误';
	            break;
	        case 404:
	            message = '请求地址出错';
	            break;
	        case 408:
	            message = '请求超时';
	            break;
	        case 500:
	            message = '服务器内部错误!';
	            break;
	        case 501:
	            message = '服务未实现!';
	            break;
	        case 502:
	            message = '网关错误!';
	            break;
	        case 503:
	            message = '服务不可用!';
	            break;
	        case 504:
	            message = '网关超时!';
	            break;
	        case 505:
	            message = 'HTTP版本不受支持';
	            break;
	        default:
	            message = '请求失败'
	    }
		    ElMessage.error(message);
		    return Promise.reject(error);
       }
    return Promise.reject(error);
});


export default instance;
————————————————
版权声明：本文为CSDN博主「慌张°」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44698285/article/details/116271180

import axios from 'axios';

// 请求域名-本地请求
// const http: string = 'http://192.168.1.128:8870';

const http: string = '/api';
// url处理
const getUrl = (url: string) => {
    if (!url) {
        return '';
    }
    return `${http}${url}`;
};
// post请求
const Post = ({ url = '', data = {} }) => {

    let theUrl: string = getUrl(url);

    return axios.post(theUrl, data)
        .then((response) => {
            if (response) {
                return response;
            } else {
                return Promise.reject();
            }
        })
};
// Get请求
const Get = ({ url = '', data = {} }) => {
    let theUrl: string = getUrl(url);
    return axios.get(theUrl, {
        params: data
    }).then((response) => {
        if (response) {
            return response;
        } else {
            return Promise.reject();
        }
    })

}
// export default {
//     Post
// };
export {
    Post, Get
};

7.导入main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入router和store
import router from './router/index'
import store from './store/index'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

8.vue-tsc 版本较低 可以用tsc 来替换