refactor: modify proxy setting

This commit is contained in:
chansee97 2024-03-28 23:03:54 +08:00
parent 95ae091cf5
commit c20d74ddc1
7 changed files with 44 additions and 37 deletions

View File

@ -1 +1,2 @@
# 是否开启服务接口代理 Y | N
VITE_HTTP_PROXY=N VITE_HTTP_PROXY=N

View File

@ -1,33 +1,32 @@
import type { ProxyOptions } from 'vite' import type { ProxyOptions } from 'vite'
import { mapEntries } from 'radash'
/** 不同请求服务的环境配置 */ export function generateProxyPattern(envConfig: Record<string, string>) {
export const proxyConfig: Record<ServiceEnvType, ServiceEnvConfig> = { return mapEntries(envConfig, (key, value) => {
dev: { return [
url: 'https://mock.apifox.com/m1/4071143-0-default', key,
urlPattern: '/url-pattern', {
}, value,
test: { proxy: `/proxy-${key}`,
url: 'http://localhost:8080',
urlPattern: '/url-pattern',
},
prod: {
url: 'https://mock.apifox.com/m1/4071143-0-default',
urlPattern: '/url-pattern',
}, },
]
})
} }
/** /**
* @description: vite代理字段 * @description: vite代理字段
* @param {*} envConfig - * @param {*} envConfig -
*/ */
export function createViteProxy(envConfig: ServiceEnvConfig) { export function createViteProxy(envConfig: Record<string, string>) {
const proxy: Record<string, string | ProxyOptions> = { const proxyMap = generateProxyPattern(envConfig)
[envConfig.urlPattern]: { return mapEntries(proxyMap, (key, value) => {
target: envConfig.url, return [
value.proxy,
{
target: value.value,
changeOrigin: true, changeOrigin: true,
rewrite: path => path.replace(new RegExp(`^${envConfig.urlPattern}`), ''), rewrite: (path: string) => path.replace(new RegExp(`^${value.proxy}`), ''),
}, },
} ]
}) as Record<string, string | ProxyOptions>
return proxy
} }

12
service.config.ts Normal file
View File

@ -0,0 +1,12 @@
/** 不同请求服务的环境配置 */
export const serviceConfig: Record<ServiceEnvType, Record<string, string>> = {
dev: {
url: 'https://mock.apifox.com/m1/4071143-0-default',
},
test: {
url: 'https://mock.apifox.com/m1/4071143-0-default',
},
prod: {
url: 'https://mock.apifox.com/m1/4071143-0-default',
},
}

View File

@ -7,7 +7,7 @@ const router = useRouter()
</script> </script>
<template> <template>
<div class="flex-col-center h-full"> <div class="flex-col-center">
<img <img
v-if="type === '403'" v-if="type === '403'"
src="@/assets/svg/error-403.svg" src="@/assets/svg/error-403.svg"

View File

@ -1,12 +1,13 @@
import { createAlovaInstance } from './alova' import { createAlovaInstance } from './alova'
import { proxyConfig } from '@/../build/proxy' import { serviceConfig } from '@/../service.config'
import { generateProxyPattern } from '@/../build/proxy'
const { url, urlPattern } = proxyConfig[import.meta.env.MODE] const { url } = generateProxyPattern(serviceConfig[import.meta.env.MODE])
const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y' || false const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y' || false
export const alovaInstance = createAlovaInstance({ export const alovaInstance = createAlovaInstance({
baseURL: isHttpProxy ? urlPattern : url, baseURL: isHttpProxy ? url.proxy : url.value,
}) })
export const blankInstance = createAlovaInstance({ export const blankInstance = createAlovaInstance({

View File

@ -6,13 +6,6 @@
*/ */
type ServiceEnvType = 'dev' | 'test' | 'prod' type ServiceEnvType = 'dev' | 'test' | 'prod'
/** 后台服务的环境配置 */
interface ServiceEnvConfig {
/** 请求地址 */
url: string
/** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */
urlPattern: '/url-pattern'
}
interface ImportMetaEnv { interface ImportMetaEnv {
/** 项目基本地址 */ /** 项目基本地址 */
readonly VITE_BASE_URL: string readonly VITE_BASE_URL: string

View File

@ -1,13 +1,14 @@
import { resolve } from 'node:path' import { resolve } from 'node:path'
import { defineConfig, loadEnv } from 'vite' import { defineConfig, loadEnv } from 'vite'
import { createVitePlugins } from './build/plugins' import { createVitePlugins } from './build/plugins'
import { createViteProxy, proxyConfig } from './build/proxy' import { createViteProxy } from './build/proxy'
import { serviceConfig } from './service.config'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件 // 根据当前工作目录中的 `mode` 加载 .env 文件
const env = loadEnv(mode, __dirname, '') as ImportMetaEnv const env = loadEnv(mode, __dirname, '') as ImportMetaEnv
const envConfig = proxyConfig[mode as ServiceEnvType] const envConfig = serviceConfig[mode as ServiceEnvType]
return { return {
base: env.VITE_BASE_URL, base: env.VITE_BASE_URL,