安裝 Axios 并封裝铸豁,再配置環(huán)境變量
本章節(jié)源碼:Lzq811/vite-vue-ts-eslint at vite+vue3+ts 引入 axios 并做二次封裝 (github.com)
1. 安裝使用 Axios
- install
yarn add axios
- 封裝
-
在 src 文件夾下新建 api 文件险污,并在 api 文件夾下新建 index.tsx 和 ajax.tsx 兩個(gè)文件
// 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('數(shù)據(jù)獲取失敗!') 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接三個(gè)參數(shù)为严,url必填, params默認(rèn)空對象可以不寫, get或者post默認(rèn)post可以不寫, // 登陸login export const ReqLogin = (params: IParrms) => ajax(`${BASE}/login`, params) // 測試獲取狗狗照片 到App.vue中執(zhí)行獲取動(dòng)作 export const ReqGetDogs = () => ajax(`https://dog.ceo/api/breeds/image/random`, {}, 'GET')
-
在組件中調(diào)用接口
// App.vue import { ReqGetDogs } from './api' onMounted(() => { GetDogs() }) const GetDogs = async () => { const res = await ReqGetDogs() // res就是過濾后要返回的數(shù)據(jù) }
2. 配置環(huán)境變量
-
安裝cross-env
yarn add cross-env -D
在根目錄新建 .env 、 .env.test 和 .env.prod耳舅,并寫入對應(yīng)代碼
NODE_ENV = 'dev' # dev test prod 對應(yīng)不同的運(yùn)行環(huán)境
VITE_HOST = 'https://dev.com' # 對應(yīng)的不同環(huán)境的后臺地址
- 修改 api/index.tsx文件
const BASE = 'XXXX'
// 改成
const BASE = import.meta.env.VITE_HOST || `https://XXXX.com`
- 配置 package.json 的運(yùn)行腳本
"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"
},
- 修改 vite.config.ts 的配置
server: {
open: true, // 啟動(dòng)項(xiàng)目后自動(dòng)打開瀏覽器
port: 3005, // 修改默認(rèn)的監(jiān)聽端口 3000 -》 3005
host: '0.0.0.0' // 配合 package.json scripts中 --host 0.0.0.0 來允許通過ip地址來訪問服務(wù)
}
本章節(jié)源碼:Lzq811/vite-vue-ts-eslint at vite+vue3+ts 引入 axios 并做二次封裝 (github.com)