这个vite.config.js文件是Vite项目的核心配置文件，它使用导出一个配置对象来定制Vite的行为。下面我将逐部分解读这个配置：

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

export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    legacy({
      targets: ["defaults", "not IE 11"],
    })
  ],
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
})

配置结构图解

配置详解

1. 导入部分

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

• defineConfig：Vite 的配置辅助函数，提供类型提示和自动补全
• legacy：为传统浏览器提供支持的官方插件
• vue：Vite 的 Vue 插件，支持 Vue 单文件组件
• resolve：Node.js 的路径解析工具，用于处理文件路径

2. 基础路径配置

base: "./",

• 作用：设置项目的公共基础路径
• 值说明：

• "./" 表示相对路径，适用于静态文件部署
• 如果部署在子路径下（如 https://domain.com/subpath/），应设置为 "/subpath/"

• 影响范围：

• 所有资源路径（JS、CSS、图片等）
• 路由的 base URL
• HTML 中 <base> 标签的值

3. 插件系统

plugins: [
  vue(),
  legacy({
    targets: ["defaults", "not IE 11"],
  })
],

a) Vue 插件

vue()

• 作用：启用 Vue 3 单文件组件支持
• 功能：

• 解析 .vue 文件
• 支持 Vue 3 的 Composition API
• 提供模板编译和热模块替换

• 选项：可以传递配置对象（本例使用默认配置）

b) Legacy 插件

legacy({
  targets: ["defaults", "not IE 11"],
})

• 作用：为传统浏览器生成兼容性代码
• 配置参数：

• targets：浏览器兼容目标

• "defaults"：使用 browserslist 的默认配置
• "not IE 11"：排除 Internet Explorer 11

• 实际效果：

• 生成现代浏览器和传统浏览器的双重构建
• 自动添加 polyfills
• 通过 <script nomodule> 为旧浏览器提供回退

• 兼容性范围：

• 支持所有现代浏览器
• 支持除 IE11 外的较旧浏览器（如 Edge 15-18）

4. 开发服务器配置

server: {
  port: 3000
}

• 作用：配置开发服务器行为
• 当前配置：

• port: 3000：设置开发服务器端口为 3000

• 其他常用选项：

server: {
  port: 3000,          // 端口号
  open: true,          // 启动后自动打开浏览器
  host: '0.0.0.0',     // 允许局域网访问
  proxy: {             // 代理配置
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

5. 模块解析配置

resolve: {
  alias: {
    '@': resolve('src')
  }
}

• 作用：自定义模块解析行为
• alias：创建路径别名

• '@': resolve('src')：将 @ 映射到项目根目录下的 src 目录

• 使用示例：

// 使用别名前
import MyComponent from '../../components/MyComponent.vue'

// 使用别名后
import MyComponent from '@/components/MyComponent.vue'

• 优势：

• 简化导入路径
• 提高代码可读性
• 便于项目重构

配置对应的项目结构

my-project/
├── src/                  // 对应 @ 别名
│   ├── components/       // Vue 组件
│   ├── assets/           // 静态资源
│   └── main.js           // 应用入口
├── public/               // 公共资源
├── node_modules/         // 依赖包
├── index.html            // 主页面
├── package.json          // 项目配置
└── vite.config.js        // 当前配置文件

完整配置扩展建议

如果需要进一步优化项目，可以考虑添加以下配置：

export default defineConfig({
  // 现有配置...
  
  // 构建配置
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录
    sourcemap: true, // 生成 sourcemap
    minify: 'terser', // 代码压缩工具
  },
  
  // CSS 预处理器配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  
  // 环境变量配置
  envPrefix: 'VITE_', // 环境变量前缀
  
  // 性能优化
  optimizeDeps: {
    include: ['vue', 'vue-router'] // 预构建依赖
  }
})

配置总结

此配置适用于典型的 Vue 3 项目，提供了：

1. 现代浏览器和传统浏览器的双重支持
2. 简化的模块导入路径
3. 明确的开发服务器端口
4. 适合静态部署的基础路径

根据项目需求，您可以进一步扩展此配置，例如添加环境变量支持、配置代理服务器或优化构建输出。