本地开发和实际生产的服务器环境不同，为了减少代码的改动，一般会将变化的内容放在配置文件里，根据实际情况进行配置

vite 使用了 dotenv 这个第三方的库，对环境变量进行处理

vite 环境变量

官方文档 https://cn.vitejs.dev/guide/env-and-mode.html

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，可以在任何地方进行使用，

打印下 console.log(import.meta.env)，默认有下面几个属性

![[image/Pasted image 20240216221826.png]]

源码中定义了接口 ImportMetaEnv，包含这些属性

interface ImportMetaEnv {
  [key: string]: any
  BASE_URL: string
  MODE: string
  DEV: boolean
  PROD: boolean
  SSR: boolean
}

Vite 默认使用 dotenv 从你根目录中读取下列文件加载额外的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

例如在 .env 文件中添加下面两个配置

VITE_SOME_KEY=123
DB_PASSWORD=123456

VITE_SOME_KEY 会被加到 import.meta.env 环境变量中，也就是说只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码，当然这个前缀也是可以通过 envPrefix 进行配置的

![[image/Pasted image 20240216222223.png]]

env 配置

一般可以 .env 文件配置如下参数

# 网站标题
VITE_APP_TITLE = 'fakar'

# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH = '/'

VITE_PORT = 3000

# axios base api
VITE_BASE_API = '/api'

# 是否启用MOCK
VITE_USE_MOCK = true

# 是否启用代理(只对本地vite server生效，开启MOCK时可关闭代理)
VITE_USE_PROXY = true

# 代理类型(跟启动和构建环境无关)  'dev' | 'test' | 'prod'
VITE_PROXY_TYPE = 'test'

proxy 配置

新建 proxy.ts 文件

import { ProxyOptions } from 'vite'

const proxyConfigMappings: Record<ProxyType, ProxyConfig> = {
  dev: {
    prefix: '/api',
    target: 'http://localhost:8080',
  },
  test: {
    prefix: '/api',
    target: 'http://localhost:8080',
  },
  prod: {
    prefix: '/api',
    target: 'http://localhost:8080',
  },
}

function getProxyConfig(envType: ProxyType = 'dev'): ProxyConfig {
  return proxyConfigMappings[envType]
}

export function createViteProxy(isUseProxy = true, proxyType: ProxyType) {
  if (!isUseProxy) {
    return undefined
  }

  const proxyConfig = getProxyConfig(proxyType)
  const proxy: Record<string, string | ProxyOptions> = {
    [proxyConfig.prefix]: {
      target: proxyConfig.target,
      changeOrigin: true,
      rewrite: (path: string) => path.replace(new RegExp(`^${proxyConfig.prefix}`), ''),
    },
  }
  return proxy
}

vite 配置

经过上面环境配置后，vite.config.ts 文件也需要更改下对应的配置

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import { createVitePlugins } from './config/vite/plugins'
import { createViteProxy } from './config/vite/proxy'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const viteEnv = loadEnv(mode, process.cwd()) as ViteEnv
  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_USE_PROXY, VITE_PROXY_TYPE } = viteEnv
  return {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.test.abc/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
    // 例如，如果你的应用被部署在 https://www.test.abc/admin/，则设置 baseUrl 为 /admin/。
    base: VITE_PUBLIC_PATH === 'production' ? '/' : '/',
    plugins: createVitePlugins(viteEnv, command === 'build'),
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    // vite 相关配置
    server: {
      port: VITE_PORT,
      host: true,
      open: false,
      proxy: createViteProxy(VITE_USE_PROXY, VITE_PROXY_TYPE as ProxyType)
    },
    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
    css: {}
  }
})