vite配置技巧，转载

Vite 是一个现代前端构建工具，它提供了极速的开发服务器和高效的构建机制。本文分享了一些常用的 Vite 配置技巧，可以帮助你更好地定制和优化你的项目

 

一、基础配置

1. 项目根目录使用 root 配置项来指定项目的根目录。默认情况下，Vite 会将当前工作目录作为项目的根目录。但在一些复杂的项目结构中，可能需要显式指定项目根目录。
2. 公共基础路径使用 base 配置项来指定在开发或生产环境中应用的公共基础路径。这有助于确保静态资源文件能够被正确加载。

二、开发服务器配置

1. 端口配置通过 server.port 配置项来指定开发服务器的端口。默认端口是 3000，但你可以根据需要修改为其他端口。
2. 代理配置如果你的项目需要与后端 API 进行通信，可以通过 server.proxy 配置项为开发服务器配置代理，以避免跨域问题。
3. HTTPS 配置通过 https 配置项来提供安全的通信机制，包括配置 SSL 证书的路径。

三、构建配置

1. 输出目录使用 build.outDir 配置项来指定生产环境打包文件的输出目录。默认输出到 dist 目录。
2. 代码压缩Vite 默认会对生产环境的代码进行压缩。你可以通过 build.minify 配置项来选择压缩方式（如 terser 或 esbuild），或者关闭压缩。

四、插件配置

Vite 具有强大的插件系统，允许你在开发和构建过程中扩展其功能。以下是一些常用插件的配置方法：

1. 官方插件如 @vitejs/plugin-vue、@vitejs/plugin-react-swc 等，用于支持 Vue 或 React 等框架。
2. 第三方插件  如 vite-plugin-compression 用于对构建出来的文件进行压缩。
• vite-plugin-svg-icons 用于优化 SVG 图标的使用。
• unplugin-auto-import 和 unplugin-vue-components 用于按需自动导入组件和库。

五、其他高级配置

1. 模块解析别名使用 resolve.alias 配置项来设置模块解析的别名，有助于简化模块路径，提高代码的可读性。
2. 全局常量定义使用 define 配置项来定义全局常量，这些常量可以在整个项目中被访问和使用。
3. 静态资源包含使用 assetsInclude 配置项来指定需要包含的静态资源。

六、配置示例

以下是一个结合了多个配置项的 Vite 配置文件示例：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import compression from 'vite-plugin-compression';
export default defineConfig({
  root: './src', // 指定项目根目录
  base: '/app/', // 公共基础路径
  server: {
    port: 8080, // 指定开发服务器端口
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理到后端 API 服务
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: '../dist', // 打包输出目录
    minify: 'esbuild', // 使用 esbuild 进行压缩
  },
  plugins: [
    vue(), // 使用 Vue 插件
    compression(), // 使用 gzip 压缩插件
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置模块解析别名
    },
    extensions: ['.js', '.vue', '.json', '.ts'], // 省略扩展名列表
  },
  define: {
    'process.env.API_URL': JSON.stringify('https://api.example.com'), // 定义全局常量
  },
});

以上配置示例结合了项目根目录、公共基础路径、开发服务器端口、代理配置、构建输出目录、代码压缩、插件使用、模块解析别名、全局常量定义等多个配置项，适用于 Vue 项目。你可以根据自己的项目需求进行调整和优化。