vit -- 常用配置

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  // 插件
  plugins: [
    vue() // 集成 Vue 插件
    // ...可以添加更多的 Vite 插件
  ],

  // 解析别名，可以方便地引用项目中的文件
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 使用 src 目录作为引用路径中的 @
      'components': path.resolve(__dirname, 'src/components'), // 直接使用 components 目录
      // ...可以添加更多别名
    }
  },

  // 定义全局常量替换方式
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version), // 使用 package.json 中的版本
  },

  // 本地开发服务器配置
  server: {
    port: 3000, // 设置开发服务器运行的端口
    open: true, // 自动打开浏览器
    cors: true, // 允许跨域

    // 设置代理，可以解决本地开发跨域请求的问题
    proxy: {
      '/api': {
        target: 'http://backend-api.com', // 后端 API 地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 重写 API 请求
      }
      // ...可以添加更多代理规则
    }
  },

  // 构建时配置
  build: {
    outDir: 'dist', // 输出文件夹，默认为 'dist'
    assetsDir: 'assets', // 放置生成的静态资源的目录，默认为 'assets'
    minify: 'terser', // 压缩器，默认为 'terser', 'esbuild' 是一个更快的压缩器，但可能有更多的限制
    sourcemap: false, // 是否创建 source map 文件
    rollupOptions: {
   
      // Rollup 打包配置
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/name-[hash].[ext]'
      }
    },
  
    terserOptions: {
      // terser 压缩配置
      compress: {
        drop_console: true, // 移除 console.* 函数调用（仅在生产环境）
        drop_debugger: true // 移除 debugger 语句
      }
    }

    // 分包配置
    splitChunks: {
      minSize: 10000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 10,
      maxInitialRequests: 5,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.[chunkhash].js',
        },
      },
    },
  },



  // 公共基础路径，可以是一个 URL（如 '/', '/sub/'）或空字符串
  base: './', // 生产环境下需要的静态文件路径

  // 静态资源服务的文件夹
  publicDir: 'public',

  // ...可以添加更多配置
});

插件：使用了 Vue 官方的插件来支持单文件组件。

别名：定义了一些便利的路径别名，可以在 JavaScript 和 CSS 中使用。

全局常量：定义了一些在全局代码中可以使用的常量，例如版本号。

开发服务器：配置了本地开发服务器，包括自动打开浏览器、跨域和代理。

构建：定义了构建输出和优化选项，包括输出目录、压缩器、source map 和 Rollup 打包器的配置。

基础路径：配置了用于加载资源的基础路径。

静态文件服务：指定了一个目录，该目录下的文件会被 Vite 资源服务器作为静态文件提供。