vite：常见的配置

Vite 是一种新型前端构建工具，它采用了基于 ESModule 的 tree-shaking 能力，以及开发服务器热重载的特性，这使得开发过程更加快速。

以下是 Vite 中一些常见的配置方法：

1. 配置别名（Aliases）

在 Vite 中，你可以使用 resolve.alias 配置选项来设置路径别名。这可以帮助你简化 import 语句，使其更易于阅读和维护。

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

2. 插件配置（Plugins）

Vite 支持使用插件扩展功能。你可以使用第三方插件，或者自己编写插件来满足特定需求。

// vite.config.js
import { defineConfig } from 'vite';
import myCustomPlugin from './path/to/myCustomPlugin';
 
export default defineConfig({
  plugins: [myCustomPlugin()],
});

3. 配置服务器（Server）

你可以配置 Vite 开发服务器的端口、主机名、SSL 以及代理设置等。

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  server: {
    port: 3000,
    host: 'localhost',
    https: false,
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

4. 配置构建（Build）

你可以配置 Vite 的构建过程，比如生产环境是否压缩、混淆代码等。

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

5. 预处理器配置（Preprocessors）

Vite 支持多种预处理器，如 SCSS、Less、Stylus 等。

// vite.config.js
import { defineConfig } from 'vite';
import scss from 'sass';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./path/to/variables.scss";`,
      },
    },
  },
});

这些是 Vite 中一些常见的配置方法。具体配置会根据项目的具体需求而有所不同。