配置Vite+React+TS项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了配置Vite+React+TS项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

初始化

执行npm create vite并填写项目名、用那个框架。。

配置

路径别名

在vite.config.ts里面配置：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src') // 路径别名
      ...
    }
  }
})

如果开发环境是ts，会提示如找不到path或找不到__dirname等，需要先安装一下node的类型声明文件:
npm i -D @types/node

然后去修改根目录的tsconfig.json文件，不然你使用路径别名引入组件的时候会报错，没写baseUrl vite会warning：

{
  "compilerOptions": {
    "baseUrl": "./",
    /* path alias */
    "paths": {
      "@/*": ["src/*"],
      ...
    }
  },
}

配置Less

直接执行npm i less就行

路由

react-router-dom是处理项目中路由问题的组件库，默认是没有这个组件库，需要额外下载：
npm add react-router-dom --save-dev
在根目录下的index.tsx里面把<App />外层包裹上：

import { BrowserRouter } from "react-router-dom";
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <BrowserRouter>
      <App />	
  </BrowserRouter>
);

自己去src里面创建router文件夹处理路由的信息，然后在App.tsx里面加上useRoutes：文章来源地址https://www.toymoban.com/news/detail-834180.html

import { Suspense } from 'react';
import { useRoutes } from 'react-router-dom'
import './App.css';
import routes from "./router"; // router文件夹的路由信息

function App() {
  return (
    <div className="App">
      <Suspense fallback="loading">
        <div className="main">
          {useRoutes(routes)}
        </div>
      </Suspense>
    </div>
  );
}

export default App;

封装Axios

import axios, { AxiosRequestConfig } from 'axios';

//默认请求超时时间
const timeout = 30000;

//创建axios实例
const service = axios.create({
  timeout,
  // 如需要携带cookie 该值需设为true
  withCredentials: true,
  // headers:{
  //   Authorization:"Basic YWRtaW46dGVzdA=="
  // }
});

// function getCookie(cookieName:any) {
//   const name = cookieName + "=";
//   const decodedCookie = decodeURIComponent(document.cookie);
//   const cookieArray = decodedCookie.split(';');
//   for (let i = 0; i < cookieArray.length; i++) {
//     let cookie = cookieArray[i];
//     while (cookie.charAt(0) === ' ') {
//       cookie = cookie.substring(1);
//     }
//     if (cookie.indexOf(name) === 0) {
//       return cookie.substring(name.length, cookie.length);
//     }
//   }
//   return "";
// }

// const yourCookieValue = getCookie("FLOWABLE_REMEMBER_ME");

// 统一请求拦截 可配置自定义headers 例如 language、token等
service.interceptors.request.use(
  (config: any) => {
    
    // if(config.url.includes("/workFlow")){
      
      
    //   config.headers.cookie = 'FLOWABLE_REMEMBER_ME' + yourCookieValue
    //   console.log(config.headers);
    // }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// axios返回格式
interface axiosTypes<T>{
  data: T;
  status: number;
  statusText: string;
}

// axios.create()

// 后台响应数据格式
// interface responseTypes<T>{
//   code: number,
//   msg: string,
//   result: T
// }

//核心处理代码 将返回一个promise 调用then将可获取响应的业务数据
const requestHandler = <T>(method: 'get' | 'post' | 'put' | 'delete' | 'patch', url: string, params: object = {}, config: AxiosRequestConfig = {}): Promise<T> => {
  //   let response: Promise<axiosTypes<responseTypes<T>>>;
  let response: Promise<axiosTypes<any>>;
  // if(url.includes('/flowable')) config = {
  //   headers:{
  //   'Cookie': 'FLOWABLE_REMEMBER_ME' + yourCookieValue
  // }}
  switch(method){
    case 'get':
      response = service.get(url, {params: { ...params }, ...config});
      break;
    case 'post':
      response = service.post(url, params, {...config});
      break;
    case 'put':
      response = service.put(url, {...params}, {...config});
      break;
    case 'delete':
      response = service.delete(url, {params: { ...params }, ...config});
      break
    case 'patch':
      response = service.patch(url, {...params}, {...config});
      break;
  }
  
  return new Promise<T>((resolve, reject) => {
    response.then(res => {
      // 业务代码 可根据需求自行处理
      const data = res.data;
      
      if(res.status !== 200 && res.status !== 304){
        
        // 特定状态码 处理特定的需求
        if(data.code == 401){
          console.log('登录异常，执行登出...');
        }
        const e: string = JSON.stringify(data);
        console.log(`请求错误：${e}`)
        reject(data);
      }else{
        // 数据请求正确 使用 resolve 将结果返回
        resolve(res.data);
      }
    }).catch(error => {
      const e: string = JSON.stringify(error);
      console.log(`网络错误：${e}`)
      reject(error);
    })
  })
}

// 使用 request 统一调用，包括封装的get、post、put、delete等方法
const request = {
  get: <T>(url: string, params?: object, config?: any) => requestHandler<T>('get', url, params, config),
  post: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('post', url, params, config),
  put: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('put', url, params, config),
  delete: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('delete', url, params, config),
  patch: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('patch', url, params, config),
};

// 导出至外层，方便统一使用
export { request };