Vite.config.js 配置概述：优化前端构建体验

2023-11-29 21:39:11

前言

Vite 是一个极速的前端构建工具，以其闪电般的构建速度和开箱即用的开发体验而闻名。为了充分利用 Vite 的强大功能，您需要对它的配置文件 vite.config.js 有深入的了解。

修改环境变量类型错误问题

在创建 Vite 项目时，您可能遇到环境变量类型错误的问题。这是因为 Vite 默认将环境变量解析为字符串类型，而某些情况下您需要使用其他类型。例如，如果您需要使用数字类型，则需要在环境变量前面加上 Number() 前缀。

// .env
FOO=123

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  env: {
    FOO: Number(process.env.FOO)
  }
})

设置别名

别名（Alias）允许您为项目中常用的路径设置简短的名称，从而简化导入语句。例如，如果您经常导入 src/components 目录下的文件，则可以为该目录设置别名 @components。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@components': 'src/components'
    }
  }
})

使用插件

Vite 提供了丰富的插件生态系统，您可以根据项目的需要安装和使用插件。例如，如果您需要支持 TypeScript，则可以安装 vite-plugin-typescript 插件。

// 安装插件
npm install vite-plugin-typescript

// vite.config.js
import { defineConfig } from 'vite'
import typescript from 'vite-plugin-typescript'

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

优化构建速度

Vite 的构建速度非常快，但您仍然可以通过一些优化措施进一步提升构建速度。例如，您可以通过调整缓存策略、启用多线程构建等方式来提高构建速度。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    // 启用多线程构建
    target: 'esnext',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true
      }
    },
    // 启用缓存
    cache: 'yarn'
  }
})