解析选项与扩展名

Vite 支持配置模块扩展名解析顺序，简化导入语句中的文件后缀。

extensions 配置

export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue', '.json']
  }
})

默认扩展名

注意：默认配置已包含常用扩展名，无需显式配置。

简化导入

// 原导入（带扩展名）
import Component from './Component.vue'
import utils from './utils.ts'
import data from './data.json'

// 简化导入（省略扩展名）
import Component from './Component'
import utils from './utils'
import data from './data'

自定义扩展名顺序

export default defineConfig({
  resolve: {
    // 解析顺序影响同名文件匹配
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.vue']
  }
})

同名文件时按顺序解析，优先匹配排在前面的扩展名。

添加自定义扩展名

export default defineConfig({
  resolve: {
    extensions: [
      '.js', '.ts', '.jsx', '.tsx', '.vue',
      '.mjs', '.mts'  // 添加 ES 模块扩展名
    ]
  }
})

mainFields 配置

export default defineConfig({
  resolve: {
    // 包入口字段解析顺序
    mainFields: ['module', 'jsnext:main', 'browser', 'main']
  }
})

要点总结

• extensions 配置扩展名解析顺序
• 默认包含常用扩展名
• 简化导入省略文件后缀
• 同名文件按顺序优先匹配