知识库

Appearance

Return to top
On this page

Vite 配置

Vite 的配置文件（vite.config.js 或 vite.config.ts）是可选的，但当您需要自定义功能时，它就变得非常重要。本章将详细介绍 Vite 配置的各个方面。

配置文件格式

Vite 配置文件支持以下格式：

  • .js 或 .ts 文件（推荐）
  • .mjs 文件（ES 模块）
  • package.json 中的 vite 字段

配置文件默认导出一个配置对象：

javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

基本配置选项

base

  • 类型: string
  • 默认值: /

部署应用时的基本 URL。例如，如果您的应用部署在 https://www.example.com/my-app/，则应将 base 设置为 /my-app/。

javascript
export default defineConfig({
  base: '/my-app/'
})

publicDir

  • 类型: string | false
  • 默认值: "public"

静态资源目录，其中的文件会被复制到构建输出目录的根目录。设置为 false 可以禁用此功能。

javascript
export default defineConfig({
  publicDir: 'my-public' // 使用自定义目录
  // 或
  publicDir: false // 禁用公共目录
})

cacheDir

  • 类型: string
  • 默认值: "node_modules/.vite"

缓存目录，用于存放预构建的依赖。

javascript
export default defineConfig({
  cacheDir: './.my-cache'
})

resolve.alias

  • 类型: Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction }>
  • 默认值: {}

配置路径别名，便于模块导入。

javascript
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@components': resolve(__dirname, './src/components'),
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

开发服务器配置

server.host

  • 类型: string | boolean
  • 默认值: "localhost"

指定开发服务器的主机地址。

javascript
export default defineConfig({
  server: {
    host: '0.0.0.0' // 允许外部访问
  }
})

server.port

  • 类型: number
  • 默认值: 5173

指定开发服务器的端口号。

javascript
export default defineConfig({
  server: {
    port: 3000
  }
})

server.open

  • 类型: boolean | string
  • 默认值: false

是否在服务器启动时自动在浏览器中打开应用程序。

javascript
export default defineConfig({
  server: {
    open: true // 自动打开浏览器
    // 或
    open: '/dashboard' // 打开特定路径
  }
})

server.proxy

  • 类型: Record<string, string | ProxyOptions>

配置代理，用于解决开发环境中的跨域问题。

javascript
export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 详细配置
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 使用函数进行更复杂的逻辑
      '/api2': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      }
    }
  }
})

构建配置

build.outDir

  • 类型: string
  • 默认值: "dist"

构建输出目录。

javascript
export default defineConfig({
  build: {
    outDir: 'my-build'
  }
})

build.assetsDir

  • 类型: string
  • 默认值: "assets"

构建后静态资源的存放目录（相对于 outDir）。

javascript
export default defineConfig({
  build: {
    assetsDir: 'static'
  }
})

build.minify

  • 类型: "terser" | "esbuild" | false
  • 默认值: "esbuild"

指定压缩方式。terser 体积更小但更慢，esbuild 更快但压缩率略低。

javascript
export default defineConfig({
  build: {
    minify: 'terser' // 使用 terser 压缩
  }
})

build.sourcemap

  • 类型: boolean | "inline" | "hidden"
  • 默认值: false

是否生成 sourcemap。

javascript
export default defineConfig({
  build: {
    sourcemap: true
  }
})

build.rollupOptions

  • 类型: RollupOptions

传递额外的 Rollup 选项。

javascript
export default defineConfig({
  build: {
    rollupOptions: {
      // 外部化依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

预处理器配置

css.preprocessorOptions

配置 CSS 预处理器选项。

javascript
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      },
      less: {
        math: 'parens-division'
      }
    }
  }
})

环境变量和模式

envDir

  • 类型: string
  • 默认值: root

环境变量文件的目录。

javascript
export default defineConfig({
  envDir: './env'
})

mode

  • 类型: string
  • 默认值: "development" (serve) / "production" (build)

指定模式。

javascript
export default defineConfig({
  mode: 'staging'
})

条件配置

您可以根据不同的模式返回不同的配置：

javascript
import { defineConfig } from 'vite'

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    // 开发环境配置
    return {
      base: '/',
      server: {
        port: 8080
      }
    }
  } else {
    // 构建环境配置
    return {
      base: '/my-app/',
      build: {
        outDir: 'my-build'
      }
    }
  }
})

完整示例

以下是一个包含常用配置的完整示例：

javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  // 基本配置
  base: '/my-app/',
  publicDir: 'public',
  cacheDir: 'node_modules/.vite',
  
  // 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@assets': resolve(__dirname, './src/assets'),
      '@components': resolve(__dirname, './src/components')
    }
  },
  
  // 插件
  plugins: [vue()],
  
  // 开发服务器配置
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
      }
    }
  },
  
  // CSS 预处理器配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  },
  
  // 环境变量目录
  envDir: './env'
})

通过合理配置 Vite，您可以根据项目需求进行定制，以满足开发和部署的各种要求。