初始化

執(zhí)行npm create vite并填寫項(xiàng)目名、用那個(gè)框架。。

配置

路徑別名

在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') // 路徑別名
      ...
    }
  }
})

如果開發(fā)環(huán)境是ts，會(huì)提示如找不到path或找不到__dirname等，需要先安裝一下node的類型聲明文件:
npm i -D @types/node

然后去修改根目錄的tsconfig.json文件，不然你使用路徑別名引入組件的時(shí)候會(huì)報(bào)錯(cuò)，沒寫baseUrl vite會(huì)warning：

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

配置Less

直接執(zhí)行npm i less就行

路由

react-router-dom是處理項(xiàng)目中路由問題的組件庫(kù)，默認(rèn)是沒有這個(gè)組件庫(kù)，需要額外下載：
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里面創(chuàng)建router文件夾處理路由的信息，然后在App.tsx里面加上useRoutes：文章來(lái)源地址http://www.zghlxwxcb.cn/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';

//默認(rèn)請(qǐng)求超時(shí)時(shí)間
const timeout = 30000;

//創(chuàng)建axios實(shí)例
const service = axios.create({
  timeout,
  // 如需要攜帶cookie 該值需設(shè)為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");

// 統(tǒng)一請(qǐng)求攔截 可配置自定義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()

// 后臺(tái)響應(yīng)數(shù)據(jù)格式
// interface responseTypes<T>{
//   code: number,
//   msg: string,
//   result: T
// }

//核心處理代碼 將返回一個(gè)promise 調(diào)用then將可獲取響應(yīng)的業(yè)務(wù)數(shù)據(jù)
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 => {
      // 業(yè)務(wù)代碼 可根據(jù)需求自行處理
      const data = res.data;
      
      if(res.status !== 200 && res.status !== 304){
        
        // 特定狀態(tài)碼 處理特定的需求
        if(data.code == 401){
          console.log('登錄異常，執(zhí)行登出...');
        }
        const e: string = JSON.stringify(data);
        console.log(`請(qǐng)求錯(cuò)誤：${e}`)
        reject(data);
      }else{
        // 數(shù)據(jù)請(qǐng)求正確 使用 resolve 將結(jié)果返回
        resolve(res.data);
      }
    }).catch(error => {
      const e: string = JSON.stringify(error);
      console.log(`網(wǎng)絡(luò)錯(cuò)誤：${e}`)
      reject(error);
    })
  })
}

// 使用 request 統(tǒng)一調(diào)用，包括封裝的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),
};

// 導(dǎo)出至外層，方便統(tǒng)一使用
export { request };

到了這里，關(guān)于配置Vite+React+TS項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！