MUKI AI Summary
使用 Vite 整合 axios 攔截器與 axios proxy，首先在 Vite 設定檔中掛代理，並使用 env 環境變數設定 API 位置。接著，透過載入 loadEnv 模組來讀取環境變數，並在 Vite 中整合代理設定。這樣可以避免使用 webpack，提升開發效率。
使用 axios 攔截器來處理請求和回應，將 Vite 的代理設定整合進來，解決跨域問題。最後，封裝 api 並提供在 SFC 的範例程式碼，示範如何在 Vue 中呼叫 API。整體流程簡化了開發過程，並提升了程式碼的可維護性。...
這是一種「分開我都會，但要整合在一起，需要一點時間實作」的筆記。
文章會分成三個部分：
- 在 Vite 設定檔裡面掛代理 (包含不用 webpack 的話，該怎麼使用 env 環境變數)
- 使用 axios 攔截器，並整合 Vite 的代理設定
- 封裝 api，並給出一段在 SFC 的 demo code
在 Vite 設定檔掛代理
▼ 在 Vite 掛代理 hen 簡單，直接上 code
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://www.google.com/v1', // api 位置
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
)}比較麻煩的是要怎麼使用 env 環境變數，網上找到的教學比較多都是使用 webpack，截至今天使用 openAI 詢問，他也是給我 webpack 的解 😂。但會想用 vite，就是想盡量不要用 webpack 的套件，而且正常來說 vite 應該有內建支援才對。
▼ 記得先新增一個 .env 環境檔，將剛剛的 API 網址放在裡面
VITE_APP_URL=https://www.google.com/v1
▼ 接著載入 loadEnv 這個模組
import { defineConfig, loadEnv } from 'vite'
export default defineConfig({
server: {
proxy: {
'/api': {
target: loadEnv('', process.cwd()).VITE_APP_URL,
// target: 'https://www.google.com/v1',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
)}loadEnv 有兩個參數，第一個是 mode，就是用來判斷你的開發環境 (.env.production, .env.development)，如果有把 env 拆成不同的 mode，可以傳參數進去，但我公司專案沒有拆，所以我傳空值。
如果要傳 mode 參數，可以改寫成這樣
import { defineConfig, loadEnv } from 'vite'
export default (mode: string) => {
const env = loadEnv(mode, process.cwd())
return defineConfig({
server: {
proxy: {
'/api': {
target: env.VITE_APP_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
)}
}使用 axios 攔截器
▼ 修改剛剛的 .env 環境檔，新增剛掛代理的設定網址
VITE_APP_URL=https://www.google.com/v1 # 新增下面這行 VITE_APP_BASE_API = "/api"
▼ 接著新增 Axios.ts 攔截器檔案
import axios from 'axios'
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API
})
service.interceptors.request.use(
(config) => {
// 在這裡加入您的邏輯
return config
},
(error) => {
// 在這裡加入您的邏輯
console.log('2')
return Promise.reject(error)
}
)
service.interceptors.response.use(
(response) => {
// 在這裡加入您的邏輯
return response
},
(error) => {
// 在這裡加入您的邏輯
return Promise.reject(error)
}
)
export default service
這樣就把 Vite 的代理設定給整合進來囉，開發其中不用再處理跨域的問題啦。
封裝 api
接著分享一下，我封裝 api 的方式
▼ 新增 api.ts 封裝檔
import request from '@/plugins/Axios'
export function Login (data: object) {
return request({
url: '/auth/login',
method: 'post',
data
})
}
▼ 在 Vue 呼叫的方式如下
<script setup lang="ts">
import { Login } from '@/models/api'
const fetchData = async (): Promise<any> => {
const payload = {
email: loginForm.account,
password: loginForm.password
}
await Login({ data: payload }).then(res => {
console.log('login', res)
})
}
</script>以上！
有任何問題，或是有更好的寫法，都歡迎分享給我，大感恩 OAO
15
2