自定义src别名

(1) 在tsconfig.json中配置paths

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

(2) vite.config.ts中配置alias

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // vue
      // '@': resolve('.', './src') // react 
    }
  }
})

env环境变量 --- VITE

在开发环境和生产环境中，我们可能需要配置不同的环境变量，例如: 开发环境中的接口地址和生产环境中的接口地址是不一样的

假如我们有development uat(测试) prd(生产) 三个环境，我们可以在项目根目录(非src)下创建三个.env文件

分别为.env.development .env.uat .env.prd

在.env.development中配置开发环境的环境变量

# just a flag
NODE_ENV = 'development' // uat or prd 根据不同的环境配置不同的环境变量

# base api
VITE_APP_BASE_API = 'http://api.address:3000'

VITE_APP_BASE_PATH = '/api/'

其他环境的配置类似

类型加持

我们可以在项目src目录下创建一个env.d.ts文件，用来定义环境变量的类型

interface ImportMetaEnv {
  VITE_APP_BASE_API: string
  VITE_APP_BASE_PATH: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

在package.json中配置

{
  "scripts": {
    "dev": "vite",
    "uat": "vite --mode uat",
    "prd": "vite --mode prd",
    "build:uat": "vite build --mode uat",
    "build:prd": "vite build --mode prd"
  }
}

我们要使用dev模式，就执行npm run dev，要使用uat模式，就执行npm run uat，要使用prd模式，就执行npm run prd

打包uat环境的代码，就执行npm run build:uat，打包prd环境的代码，就执行npm run build:prd

在项目中使用

const env = import.meta.env

// 获取环境变量
const { VITE_APP_BASE_API, VITE_APP_BASE_PATH } = env

// 获取环境变量的值
const baseApi = env.VITE_APP_BASE_API
const basePath = env.VITE_APP_BASE_PATH