详细的讲一下Vite 在 Vue3 项目中最常用和最重要的配置项

Vite 在 Vue3 中的配置详解

基础配置结构

首先让我们看一个基础的 Vite 配置文件结构：

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

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

详细配置项解析

1. 基础路径配置 (base)

export default defineConfig({
  base: './', // 开发或生产环境服务的公共基础路径
})

作用说明：

• 如果你的项目需要部署在子路径下，这个配置非常重要

• 默认是 '/'，如果要部署到二级目录，可以设置为 './'

• 在生产环境下特别有用，确保资源能够正确加载

2. 别名配置 (resolve.alias)

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

作用说明：

• 简化导入路径，避免使用复杂的相对路径

• 提高代码可维护性

• 方便项目结构调整时的路径管理

3. 服务器配置 (server)

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    https: false,
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

作用说明：

• host: 指定服务器主机名，'0.0.0.0' 允许外部访问

• port: 指定开发服务器端口

• open: 是否自动打开浏览器

• https: 是否启用 HTTPS

• proxy: 配置代理，解决开发环境跨域问题

4. 构建配置 (build)

export default defineConfig({
  build: {
    target: 'es2015',
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

作用说明：

• target: 指定构建目标

• outDir: 指定输出路径

• assetsDir: 指定静态资源存放路径

• minify: 指定代码压缩方式

• terserOptions: 代码压缩配置，如移除 console

• rollupOptions: 自定义底层的 Rollup 打包配置

5. CSS 相关配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    },
    modules: {
      localsConvention: 'camelCase'
    }
  }
})

作用说明：

• 配置 CSS 预处理器

• 自动导入全局样式变量

• 配置 CSS Modules

6. 插件配置 (plugins)

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
})

作用说明：

• vue(): 提供 Vue 3 单文件组件支持

• vueJsx(): 提供 JSX 支持

• legacy(): 为旧版浏览器提供兼容性支持

7. 环境变量配置

export default defineConfig({
  define: {
    'process.env': {
      VUE_APP_API: JSON.stringify('your-api-url')
    }
  }
})

作用说明：

• 定义全局常量

• 在不同环境中使用不同的配置值

性能优化相关配置

export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'vue'], // 预构建依赖
  },
  build: {
    chunkSizeWarningLimit: 2000, // 文件大小警告的限制 (KB)
    sourcemap: false, // 生产环境是否生成 sourcemap
    brotliSize: false, // 禁用 brotli 压缩大小报告
  }
})

作用说明：

• optimizeDeps: 优化依赖预构建

• chunkSizeWarningLimit: 控制打包文件大小警告

• sourcemap: 控制是否生成源码映射

• brotliSize: 是否计算 brotli 压缩大小

以上就是 Vite 在 Vue3 项目中最常用和最重要的配置项。每个配置项都有其特定的用途，可以根据项目需求灵活配置。正确的配置可以：

• 提高开发效率

• 优化构建性能

• 改善开发体验

• 解决跨域问题

• 优化生产环境代码

• 提供更好的浏览器兼容性

建议根据实际项目需求选择合适的配置项进行配置。