vue3+vite+ts如何配置多個(gè)代理并解決報(bào)404問(wèn)題

更新時(shí)間：2025年04月03日 10:00:26 作者：周家大小姐.

這篇文章主要介紹了vue3+vite+ts如何配置多個(gè)代理并解決報(bào)404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3+vite+ts配置多個(gè)代理并解決報(bào)404

之前配置接口代理總是報(bào)404，明明接口地址是對(duì)的但還是報(bào)是因數(shù)寫法不對(duì)；用了vue2中的寫法

pathRewrite改為rewrite

根路徑下創(chuàng)建env文件根據(jù)自己需要名命

.env.development文件內(nèi)容

# just a flag
ENV='development'

# static前綴
VITE_APP_PUBLIC_PREFIX=""
# 基礎(chǔ)模塊
VITE_APP_BASIC_PREFIX='/basicSetting'
# 任務(wù)模塊
VITE_APP_TASK_PREFIX='/task'

# 網(wǎng)關(guān)
VITE_APP_GATEWAY_PREFIX='/gateway/admin'
# 主題
VITE_APP_THEME=light


# vue-cli uses the VITE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
VITE_CLI_BABEL_TRANSPILE_MODULES=true

在vite.config.ts中配置poxy代理

import proxyConfig from './proxy'
const viteConfig = defineConfig(({ mode }) => {
 
  return {
    server: {
      host: '0.0.0.0', //解決“vite use `--host` to expose”
      port: 8080,
      open: true,
      proxy: proxyConfig
    }

  }
})
export default viteConfig

創(chuàng)建proxy.ts文件

import { ProxyOptions } from 'vite'

import { loadEnv } from 'vite'

const env = loadEnv('development', process.cwd())

const proxies: Record<string, ProxyOptions> = {
  // 任務(wù)模塊
  [env.VITE_APP_TASK_PREFIX as string]: {
    target: 'http://xxx:31249', // 目標(biāo)地址 --> 服務(wù)器地址
    changeOrigin: true, // 允許跨域
    rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_TASK_PREFIX}`), '')
  },
  [env.VITE_APP_GATEWAY_PREFIX as string]: {
    target: 'http://192.168.8.xx:8080', // 目標(biāo)地址 --> 服務(wù)器地址
    changeOrigin: true, // 允許跨域
    rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_GATEWAY_PREFIX}`), '')
  }
  // 添加其他代理配置
}

export default proxies

api.ts接口使用

import request from '@/request/request'
import settings from '@/settings'
export function getTaskList(data: any): Res<any> {
  return request({
    url: settings.taskPrefix + '/adm/detectionTasks/page',
    method: 'post',
    data
  })
}

其中的settings.ts文件可以不用封裝直接寫你的env就行；也可以像我一樣封裝

export default {
  /**
   * 任務(wù)模塊
   */
  taskPrefix: import.meta.env.VITE_APP_TASK_PREFIX,

  /**
   *  網(wǎng)關(guān)服務(wù)文件前綴
   */
  gatewayPrefix: import.meta.env.VITE_APP_GATEWAY_PREFIX
}

頁(yè)面中調(diào)用接口

import { getTaskList } from '@/api'
 const param = {
          entity: {},
          betweenCondition: {},
          page: {
            page: 1,
            pageSize: 10
          }
        }
        getTaskList(param)
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })

效果：