Vite 构建

# npm
npm create vite@latest my-project

# pnpm
pnpm create vite my-project

# 选择框架
# vanilla / vue / react / preact / lit / svelte

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

export default defineConfig({
  // 插件
  plugins: [vue()],
  
  // 开发服务器
  server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'esbuild', // 'terser' | 'esbuild'
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router']
        }
      }
    }
  },
  
  // 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  
  // 环境变量
  envPrefix: 'VITE_'
})

# .env
VITE_API_URL=http://localhost:8080

# .env.development
VITE_API_URL=http://dev-api.example.com

# .env.production
VITE_API_URL=https://api.example.com

const apiUrl = import.meta.env.VITE_API_URL

// 类型定义
interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

import vue from '@vitejs/plugin-vue'

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

import react from '@vitejs/plugin-react'

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

pnpm add vite-plugin-compression -D

import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip',
      threshold: 10240 // 大于 10KB 才压缩
    })
  ]
})

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(__dirname, 'src/icons')],
      symbolId: 'icon-[name]'
    })
  ]
})

/* example.module.css */
.container {
  color: red;
}

import styles from './example.module.css'

document.querySelector('#app').className = styles.container

# Sass
pnpm add sass -D

# Less
pnpm add less -D

# Stylus
pnpm add stylus -D

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['element-plus']
        }
      }
    }
  }
})

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
})

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      formats: ['es', 'cjs'],
      fileName: format => `index.${format === 'es' ? 'mjs' : 'js'}`
    },
    rollupOptions: {
      external: ['fs', 'path'],
      output: {
        globals: {}
      }
    }
  },
  plugins: [dts()] // 生成类型声明文件
})

export default defineConfig({
  base: '/my-app/'
})