在 Vue 3 中，使用 Vite.js 作为构建工具是一个流行的选择，因为它提供了快速的开发体验和高效的构建性能。

Vite 配置文件基本结构

Vite 配置文件通常位于项目根目录下，名为 vite.config.js 或 vite.config.ts（TypeScript 版本）。该文件导出一个配置对象，可以通过它来控制 Vite 的行为。

import { defineConfig } from 'vite';

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

defineConfig 是 Vite 提供的一个帮助函数，确保类型推导和代码提示更加友好。

常见配置项及作用

1. root

   • 作用：指定项目的根目录。默认值是当前工作目录。
   • 案例：

     export default defineConfig({
       root: 'src',  // 将项目根目录设置为 src 文件夹
     });
     

2. base

   • 作用：指定部署时的公共基础路径。它会影响生成的文件路径、资源加载路径等。通常在项目部署到非根路径时使用。
   • 案例：

     export default defineConfig({
       base: '/my-app/', // 设置应用部署路径
     });
     

3. mode

   • 作用：指定构建模式，mode 可以是 development（开发模式）、production（生产模式）等，Vite 会根据不同模式加载不同的配置和环境变量。
   • 案例：

     export default defineConfig({
       mode: 'production', // 设置为生产模式
     });
     

4. plugins

   • 作用：用于扩展 Vite 功能，通过插件系统集成第三方库或自定义插件。
   • 案例：

     import vue from '@vitejs/plugin-vue';  // 使用 Vue 插件
     
     export default defineConfig({
       plugins: [vue()], // 启用 Vue 插件
     });
     

5. server

   • 作用：配置开发服务器的选项。

     • port：设置开发服务器的端口。
     • open：启动时自动打开浏览器。
     • proxy：设置代理，用于开发环境中的接口请求转发。
     • https：是否启用 HTTPS。

   • 案例：

     export default defineConfig({
       server: {
         port: 3000,   // 设置端口号为 3000
         open: true,   // 自动打开浏览器
         proxy: {
           '/api': {
             target: 'http://localhost:5000', // 设置代理
             changeOrigin: true,              // 更改源地址
             rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
           }
         }
       }
     });
     

6. build

   • 作用：构建相关配置，控制 Vite 在生产环境中的打包行为。

     • outDir：指定构建输出目录。
     • assetsDir：指定生成的静态资源存放目录。
     • minify：是否启用代码压缩。
     • sourcemap：是否生成源代码映射。

   • 案例：

     export default defineConfig({
       build: {
         outDir: 'dist',       // 输出文件夹为 dist
         assetsDir: 'assets',  // 静态资源放在 assets 文件夹
         minify: true,         // 启用代码压缩
         sourcemap: false,     // 不生成 source map
       }
     });
     

7. resolve

   • 作用：配置模块解析相关选项。

     • alias：设置路径别名，简化导入路径。
     • extensions：设置模块解析的扩展名。

   • 案例：

     export default defineConfig({
       resolve: {
         alias: {
           '@components': '/src/components', // 设置路径别名
         },
         extensions: ['.js', '.vue', '.ts'], // 默认支持的扩展名
       }
     });
     

8. css

   • 作用：配置 CSS 相关选项。

     • modules：是否启用 CSS Modules。
     • preprocessorOptions：配置 CSS 预处理器的选项，如 scss 或 sass。

   • 案例：

     export default defineConfig({
       css: {
         modules: {
           scopeBehaviour: 'local', // 启用 CSS 模块并设置作用域
         },
         preprocessorOptions: {
           scss: {
             additionalData: `@import "./src/styles/global.scss";` // 全局引入 SCSS 文件
           }
         }
       }
     });
     

9. define

   • 作用：定义全局常量，这些常量在代码编译时会被替换。
   • 案例：

     export default defineConfig({
       define: {
         'process.env.NODE_ENV': '"production"',  // 定义环境变量
       }
     });
     

10. optimizeDeps

    • 作用：用于优化开发环境中的依赖。Vite 会在启动时对依赖进行预构建。
    • 案例：

      export default defineConfig({
        optimizeDeps: {
          include: ['lodash'],  // 手动指定需要优化的依赖
          exclude: ['some-package'], // 手动排除某些依赖
        }
      });
      

11. envPrefix

    • 作用：配置环境变量的前缀。默认是 VITE_，只有以该前缀命名的环境变量才会被暴露到前端代码中。
    • 案例：

      export default defineConfig({
        envPrefix: 'VITE_', // 只会暴露以 VITE_ 为前缀的环境变量
      });
      

12. esbuild

    • 作用：配置 Vite 使用的构建工具 esbuild 的选项。可以加速开发和构建过程。
    • 案例：

      export default defineConfig({
        esbuild: {
          jsxFactory: 'h',    // 自定义 JSX 工厂函数
          jsxFragment: 'Fragment', // 自定义 JSX Fragment
        }
      });
      

13. json

    • 作用：配置 JSON 文件的处理方式，允许在构建时直接引入 .json 文件。
    • 案例：

      export default defineConfig({
        json: {
          stringify: true, // 启用 JSON 文件的字符串化功能
        }
      });
      

常见插件配置

• Vue 插件：如果你在 Vue 项目中使用 Vite，需要安装并配置 @vitejs/plugin-vue 插件。

  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()]
  });
  

• Vite 插件：Vite 插件用于增强或修改构建过程，Vite 的插件非常丰富，可以添加如 PWA、TypeScript、Markdown 等插件。

  示例：配置 vite-plugin-pwa 插件来支持 PWA。

  import VitePWA from 'vite-plugin-pwa';
  
  export default defineConfig({
    plugins: [VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/fonts\.(googleapis|gstatic)\.com\//,
            handler: 'CacheFirst',
            options: {
              cacheName: 'google-fonts',
              expiration: {
                maxAgeSeconds: 60 * 60 * 24 * 30,  // 缓存 30 天
              },
            },
          },
        ],
      }
    })],
  });
  

总结

Vite 配置文件非常灵活，可以通过配置各种选项来满足项目的需求。主要的配置项包括：

• root：项目根目录
• base：公共基础路径
• plugins：插件配置
• server：开发服务器配置
• build：生产构建配置
• resolve：模块解析配置
• css：CSS 相关配置
• define：定义环境变量和全局常量
• optimizeDeps：优化依赖
• esbuild：配置 esbuild 性能优化
• envPrefix：环境变量前缀

完整配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';  // Vue 插件

export default defineConfig({
  // 项目根目录，默认为当前工作目录
  // root: '',  // 如果项目的根目录在 src 文件夹下，可以通过该配置指定

  // 部署时的公共基础路径
  base: '/',  // 如果应用不是部署在根路径下，设置为对应的路径

  // 配置构建模式：development / production
  mode: 'production', // 设置构建模式为生产环境

  // 插件配置，扩展功能
  plugins: [
    vue(), // Vue 插件
  ],

  // 开发服务器配置
  server: {
    port: 8034,   // 设置开发服务器端口为 3000
    open: true,   // 启动时自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 设置接口代理
        changeOrigin: true,              // 更改源地址
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      }
    },
    https: false,  // 启用 HTTPS
  },

  // 构建相关配置
  build: {
    outDir: 'dist',       // 输出文件夹为 dist
    assetsDir: 'assets',  // 静态资源存放目录为 assets
    minify: true,         // 启用代码压缩
    sourcemap: false,     // 不生成 source map
    chunkSizeWarningLimit: 500, // 设置最大 chunk 大小警告阈值（KB）
  },

  // 模块解析配置
  resolve: {
    alias: {
      '@components': '/src/components', // 配置路径别名.
      '@': '/src', // 将 '@' 设置为指向 '/src' 目录
    },
    extensions: ['.js', '.vue', '.ts'], // 默认支持的扩展名
  },

  // CSS 相关配置
  css: {
    modules: {
      scopeBehaviour: 'local',  // 启用 CSS 模块
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/global.scss";` // 全局引入 SCSS 文件
      }
    },
  },

  // 定义全局常量
  define: {
    'process.env.NODE_ENV': '"production"', // 生产环境下定义的常量
  },


  // 环境变量前缀配置
  envPrefix: 'VITE_', // 只暴露以 VITE_ 为前缀的环境变量

  // esbuild 配置，影响构建性能
  esbuild: {
    jsxFactory: 'h',    // 自定义 JSX 工厂函数
    jsxFragment: 'Fragment', // 自定义 JSX Fragment
  },

  // JSON 处理配置
  json: {
    stringify: true, // 启用 JSON 文件的字符串化功能
  },

  // // 全局后置守卫示例
  // afterEach: (to, from) => {
  //   console.log(`Navigated from ${from.path} to ${to.path}`); // 记录路由跳转日志
  // },

});