安裝 Axios 并封裝，再配置環境變量

本章節源碼:Lzq811/vite-vue-ts-eslint at vite+vue3+ts 引入 axios 并做二次封裝 (github.com)

1. 安裝使用 Axios

1. install

yarn add axios

2. 封裝

• 在 src 文件夾下新建 api 文件，并在 api 文件夾下新建 index.tsx 和 ajax.tsx 兩個文件

  // ajax.tsx
  import axios from 'axios'
  
  import { ElMessage } from 'element-plus'
  
  interface IParams {}
  
  const ajax = (url: string, data: IParams = {}, type: string = 'POST') => {
    return new Promise((resolve: any) => {
      let promise
      if (type === 'GET') {
        promise = axios.get(url, { params: data })
      } else if (type === 'POST') {
        promise = axios.post(url, data)
      }
      promise
        ?.then((response: any) => {
          resolve(response.data)
        })
        .catch((error: any) => {
          ElMessage.error('數據獲取失敗!')
          console.log(error)
        })
    })
  }
  
  export default ajax
  

  // index.tsx
  import ajax from './ajax'
  
  // 后臺地址
  const BASE: string = 'http://xxx.xxx.xx:8087'
  
  interface IParrms {
    username: string
    password: string
  }
  // ajax接三個參數，url必填, params默認空對象可以不寫, get或者post默認post可以不寫,
  // 登陸login
  export const ReqLogin = (params: IParrms) => ajax(`${BASE}/login`, params)
  
  // 測試獲取狗狗照片 到App.vue中執行獲取動作
  export const ReqGetDogs = () => ajax(`https://dog.ceo/api/breeds/image/random`, {}, 'GET')
  
  

• 在組件中調用接口

  // App.vue
  import { ReqGetDogs } from './api'
  
  onMounted(() => {
    GetDogs()
  })
  const GetDogs = async () => {
    const res = await ReqGetDogs()
    // res就是過濾后要返回的數據
  }
  

2. 配置環境變量

1. 安裝cross-env

   yarn add cross-env -D
   

2. 在根目錄新建 .env 、 .env.test 和 .env.prod，并寫入對應代碼

NODE_ENV = 'dev' # dev test prod 對應不同的運行環境
VITE_HOST = 'https://dev.com' # 對應的不同環境的后臺地址

3. 修改 api/index.tsx文件

const BASE = 'XXXX'
// 改成
const BASE = import.meta.env.VITE_HOST || `https://XXXX.com`

4. 配置 package.json 的運行腳本

"scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  }
# 改成
"scripts": {
    "dev": "cross-env vite --host 0.0.0.0 --mode dev",
    "start": "cross-env vite --host 0.0.0.0 --mode dev",
    "start-uat": "cross-env vite --host 0.0.0.0 --mode uat",
    "start-prod": "cross-env vite --host 0.0.0.0 --mode prod",
    "build": "cross-env vue-tsc --noEmit && vite build --mode dev",
    "build-test": "cross-env vue-tsc --noEmit && vite build --mode dev",
    "build-uat": "cross-env vue-tsc --noEmit && vite build --mode uat",
    "build-prod": "cross-env vue-tsc --noEmit && vite build --mode prod",
    "serve": "vite preview"
  },

5. 修改 vite.config.ts 的配置

server: {
    open: true, // 啟動項目后自動打開瀏覽器
    port: 3005, // 修改默認的監聽端口 3000 -》 3005
    host: '0.0.0.0' // 配合 package.json scripts中 --host 0.0.0.0 來允許通過ip地址來訪問服務
  }

本章節源碼：Lzq811/vite-vue-ts-eslint at vite+vue3+ts 引入 axios 并做二次封裝 (github.com)