vite.config.js

vite.config.js 配置详解

import { defineConfig, loadEnv } from "vite"; // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import path from "path";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  // 获取.env文件里定义的环境变量
  const env = loadEnv(mode, process.cwd(), "");

  //.env文件中的环境变量必须以VITE_为前缀，否则无法引用成功
  // const { VITE_APP_ENV } = env;
  if (command === "serve") {
    return {
      // dev 独有配置
    };
  } else {
    // command === 'build'
    return {
      // build 独有配置
    };
  }
  return {
    // 根路径，也就是项目的基础路径
    base: VITE_APP_ENV === "字段名" ? "/" : "/", // 例子:env.VITE_APP_BASE_URL || '/'
    plugins: [vue()],
    resolve: {
      alias: {
        //别名配置
        "~": path.resolve(__dirname, "./"), //配置的别名
        "@": path.resolve(__dirname, "./src"),
        "@images": path.resolve(__dirname, "./src/assets/images/"),
      },
      //共享配置 https://cn.vitejs.dev/config/shared-options.html#resolve-extensions
      extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    },
    // 构建配置
    build: {
      // 输出目录，默认是 dist
      outDir: "dist",
      //指定静态资源存放路径
      assetsDir: "assets",
      // 是否开启 sourcemap
      sourcemap: false,
      // 是否开启压缩
      minify: "terser", // 可选值：'terser' | 'esbuild'

      minify: "terser",
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },

      // 是否开启 brotli 压缩
      brotli: true,
      // 是否将模块提取到单独的 chunk 中，默认是 true
      chunkSizeWarningLimit: 500,
      // 是否提取 CSS 到单独的文件中
      cssCodeSplit: true,
      // 是否开启 CSS 压缩
      cssMinify: true,
      // 是否开启 CSS 去重
      cssInlineLimit: 4096,
      // 启用/禁用 esbuild 的 minification，如果设置为 false 则使用 Terser 进行 minification
      target: "es2018", // 可选值：'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2016' | 'es2015' | 'es5'
      // 是否开启 Rollup 的代码拆分功能
      rollupOptions: {
        output: {
          chunkFileNames: "js/[name]-[hash].js",
          entryFileNames: "js/[name]-[hash].js",
          assetFileNames: "[ext]/[name]-[hash].[ext]",
        },
      },

      // 是否开启增量式构建
      // https://vitejs.dev/guide/build.html#incremental-build
      incremental: false,
    },
    // 服务器配置
    server: {
      // 端口号，默认是 5173
      port: 9001,
      // host: "localhost",//ip地址例如192.168.1.177
      host: true,
      // 自定义中间件
      middleware: [],
      // 是否开启自动刷新
      // hmr: true,
      // 是否开启自动打开浏览器
      open: true,
      // 反向代理配置
      proxy: {
        //配置多个代理
        "/dev-api": {
          target: "https://xxxx.com/",
          changeOrigin: true, ///设置访问目标地址允许跨域
          rewrite: (p) => p.replace(/^\/dev-api/, ""),
        },
        "/prod-api": {
          target: "https://xxxx.com/",
          changeOrigin: true, ///设置访问目标地址允许跨域
          rewrite: (p) => p.replace(/^\/prod-api/, ""),
        },
        // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
        "/socket.io": {
          target: "ws://localhost:5174",
          ws: true,
        },
      },
    },
    css: {
      // postCss 共享配置
      postcss: {
        plugins: [
          //扩展插件
          {
            postcssPlugin: "internal:charset-removal",
            AtRule: {
              //大写AtRule
              charset: (atRule) => {
                //char set字符集
                if (atRule.name === "charset") {
                  atRule.remove(); //删除
                }
              },
            },
          },
        ],
      },
    },
    // 定义全局常量替换方式
    define: {
      "process.env": {},
      __APP_VERSION__: JSON.stringify("v1.0.0"),
      __API_URL__: "window.__backend_api_url",
    },
    // 优化配置
    optimizeDeps: {
      // 是否将 Vue、React、@vueuse/core 和 @vueuse/head 作为外部依赖提取出来
      include: ["vue", "react", "@vueuse/core", "@vueuse/head"],
      // 是否开启预构建，将预构建后的代码提前注入到浏览器缓存中，以减少首次加载的时间
      prebuild: false,
    },
  };
});

import { createLogger, defineConfig } from 'vite'

const logger = createLogger()
const loggerWarn = logger.warn

logger.warn = (msg, options) => {
  // 忽略空 CSS 文件的警告
  if (msg.includes('vite:css') && msg.includes(' is empty')) return
  loggerWarn(msg, options)
}

{
  root: process.cwd(), // 项目根目录（index.html 文件所在的位置）,
  base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
  mode: 'development', // 模式
  plugins: [vue()], // 需要用到的插件数组
  publicDir: 'public', // 静态资源服务的文件夹
  cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
  define: { // 定义全局常量替换方式
    __APP_VERSION__: JSON.stringify('v1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
  resolve: {
    alias: [ // 文件系统路径别名
      {
        find: /\/@\//,
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本
    conditions: [], // 解决程序包中 情景导出 时的其他允许条件
    mainFields: ['browser', 'module', 'jsnext:main', 'jsnext'], // 解析包入口点尝试的字段列表
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
  },
  css: {
    modules: { //https://github.com/madyankin/postcss-modules
      scopeBehaviour: 'global' | 'local',
      hashPrefix: "prefix",
      exportGlobals: true,
      // ...
    },
    postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的预处理器选项
      scss: {
        additionalData: `$injectedColor: orange;`
      },
      less: {
        math: 'parens-division',
      },
      styl: {
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
    },
    preprocessorMaxWorkers: 0 // 0（不会创建任何 worker 线程，而是在主线程中运行）; CSS 预处理器会尽可能在 worker 线程中运行。true 表示 CPU 数量减 1。
    devSourcemap: false // 在开发过程中是否启用 sourcemap
    transformer: 'postcss'  // 该选项用于选择用于 CSS 处理的引擎
  },
  json: {
    namedExports: true, // 是否支持从.json文件中进行按名导入
    stringify: false, //  开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
  },
  esbuild: { // 最常见的用例是自定义 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
  logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
  customLogger:logger, // 使用自定义 logger 记录消息
  clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
  envDir: '/', // 用于加载 .env 文件的目录
  envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
  appType:'spa', // 应用是一个单页应用（SPA）还是一个 多页应用（MPA）
  server: {
    host: '127.0.0.1', // 指定服务器应该监听哪个IP地址， 如果将此设置为0.0.0.0或者true将监听所有地址，包括局域网和公网地址。
    port: 5000, // 指定开发服务器端口,默认5173
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
    headers:{ //指定服务器响应的 header
      // ...
    },
    warmup:{ //提前转换和缓存文件以进行预热。可以在服务器启动时提高初始页面加载速度，并防止转换瀑布
      clientFiles: ['./src/components/*.vue', './src/utils/big-utils.js'], //clientFiles 是仅在客户端使用的文件
      ssrFiles: ['./src/server/modules/*.js'], // ssrFiles 是仅在服务器端渲染中使用的文件
    },
    force: true, // 强制使依赖预构建

    hmr: { // 禁用或配置 HMR 连接
      // ...
    },
    watch: { // 传递给 chokidar 的文件系统监听器选项
      // ...
    },
    middlewareMode: '', // 以中间件模式创建 Vite 服务器
    fs: {
      strict: true, // 限制为工作区 root 路径以外的文件的访问
      allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
    },
    origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
    sourcemapIgnoreList(sourcePath, sourcemapPath) { // 是否忽略服务器 sourcemap 中的源文件
      return sourcePath.includes('node_modules')
    }, 
  },
  build: {
    target: ['modules'], // 设置最终构建的浏览器兼容目标
    modulePreload:{ polyfill: true }//
    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态文件目录
    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
    cssCodeSplit: true, // 启用 CSS 代码拆分
    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
    cssMinify: true, // 此选项允许用户覆盖 CSS 最小化压缩的配置，而不是使用默认的 build.minify，这样你就可以单独配置 JS 和 CSS 的最小化压缩方式。
    sourcemap: false, // 构建后是否生成 source map 文件
    rollupOptions: {}, // 自定义底层的 Rollup 打包配置
    commonjsOptions:{}, // 传递给 @rollup/plugin-commonjs 插件的选项
    dynamicImportVarsOptions:{},// 传递给 @rollup/plugin-dynamic-import-vars 的选项
    lib: {}, // 构建为库
    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的构建
    ssrEmitAssets:false, //这个选项允许框架强制在客户端和 SSR 构建中都输出它们
    minify: 'esbuild', // 指定使用哪种混淆器 boolean | 'terser' | 'esbuild'
    terserOptions: { // 传递给 Terser 的更多 minify 选项
      compress: {
          drop_console: true,
          drop_debugger: true,
        },
    },
    write: true, // 启用将构建后的文件写入磁盘
    emptyOutDir: true, // 构建时清空该目录
    copyPublicDir:true, // 默认情况下，Vite 会在构建阶段将 publicDir 目录中的所有文件复制到 outDir 目录中。可以通过设置该选项为 false 来禁用该行为
    reportCompressedSize:true,// 启用/禁用 gzip 压缩大小报告。
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 设置为 {} 则会启用 rollup 的监听器
  },
  preview: {
    host: 8006, // 为开发服务器指定 ip 地址。 设置为 0.0.0.0 或 true 会监听所有地址，包括局域网和公共地址。
    port: 5000, // 指定开发服务器端口 默认 4173
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
    headers:{ // 指明服务器返回的响应头。
      // ... 
    }
  },
  optimizeDeps: {
    entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式
    exclude: [], // 在预构建中强制排除的依赖项
    include: [], // 可强制预构建链接的包
    esbuildOptions:{// 在依赖扫描和优化过程中传递给 esbuild 的选项
      keepNames: false, // true 可以在函数和类上保留 name 属性
    }, 
    force:false, // 设置为 true 可以强制依赖预构建，而忽略之前已经缓存过的、已经优化过的依赖
    holdUntilCrawlEnd:true, // 当该功能被启用时，系统会在冷启动时保持第一个优化的依赖结果，直到所有的静态导入都被检索完毕。
    needsInterop:[], // 当导入这些依赖项时，会强制 ESM 转换。
  },
  ssr: {
    external: [], // 列出的是要为 SSR 强制外部化的依赖,
    noExternal: '', // 列出的是防止被 SSR 外部化依赖项
    target: 'node', // SSR 服务器的构建目标
    resolve:{
      conditions:[], // 在 SSR 构建中，包入口的解析条件
      externalConditions:[] // 在 SSR 导入（包括 ssrLoadModule）外部化依赖项时使用的条件
    }
  },
  worker:{
    format:'iife',// worker 打包时的输出类型 'es' | 'iife'
    plugins:()=>{}, //应用于 worker 打包的 Vite 插件
    rollupOptions:{} // 用于打包 worker 的 Rollup 配置项
  }
}