2023.01.16

Vue3 使用 Vite 整合 axios 攔截器與 axios proxy

文章索引

這是一種「分開我都會，但要整合在一起，需要一點時間實作」的筆記。

文章會分成三個部分：

在 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，可以傳參數進去，但我公司專案沒有拆，所以我傳空值。

▼ 詳細的介紹可以參考這篇文章，說的蠻詳細的！

第二十六章-Vite的loadEnv方法 – Fidel Yiu | 前端技术博客

1.说明代码：import { loadEnv } from ‘vite’;loadEnv(‘development’, process.cwd());目的：检查process.cwd()路径下.env.development.local、.env.development、.env.local、.e

https://www.kuxiaoxin.com/archives/40

如果要傳 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

歡迎給我點鼓勵，讓我知道你來過：）