首页/ 学科题库/ vite/ vite.config.js 基础结构
vite 实战教程

vite.config.js 基础结构

2026-05-23 约 5 分钟 juanwangdev

vite.config.js 基础结构

Vite 配置文件位于项目根目录,使用 defineConfig 函数定义配置选项。

创建配置文件

JavaScript
import { defineConfig } from 'vite'

export default defineConfig({
  // 配置选项
})

使用 TypeScript

TypeScript
import { defineConfig } from 'vite'
import type { UserConfig } from 'vite'

// defineConfig 提供类型提示
export default defineConfig({
  // 配置选项
})

函数形式配置

JavaScript
import { defineConfig } from 'vite'

export default defineConfig(({ command, mode }) => {
  // command: 'serve' | 'build'
  // mode: 'development' | 'production' | ...

  return {
    // 根据环境和模式返回不同配置
  }
})

配置文件位置

位置说明
vite.config.js默认位置
vite.config.tsTypeScript 配置
vite.config.mjsES 模块配置

注意:Vite 会自动查找根目录下的配置文件,支持 .js/.ts/.mjs 格式。

基础配置示例

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  },
  build: {
    outDir: 'dist'
  }
})

配置项分类

分类说明
plugins插件配置
server开发服务器配置
build构建配置
resolve路径解析配置

要点总结

  • 使用 defineConfig 导出配置对象
  • 支持 .js/.ts/.mjs 格式
  • 函数形式可根据环境动态配置
  • 配置文件位于项目根目录
想在手机上练这篇的配套题目?
使用微信 卷王开发者小程序/App,首页顶部扫一扫识别下方二维码,即可解锁本讲对应真题与错题本。
了解产品 App
← 上一篇 自动打开浏览器 下一篇 → 配置根目录与公共基础路径