不同环境的 vite 配置文件集成

vite 是运行在 node 环境中的，但是 vite.config.js 却支持 esm 形式的代码，这是因为 vite 在读取 vite.config.js 时，会率先通过 node 解析文件语法， 在加载文件之前进行预处理（如果发现你是 esmodule 规范会直接将你的 esmodule 规范进行替换变成 commonjs 规范）。

指定配置文件

可以通过--config在 vite 运行的时候指定配置文件入口：

vite --config vite.config.js

配置文件语法提示

• defineConfig 工具函数
  适用于 vscode。

  import { defineConfig } from "vite";
  export default defineConfig({});
  

• jsdoc 注释

  Vite 本身附带 TypeScript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示

  /** @type {import('vite').UserConfig} */
  export default {
    // ...
  };
  

  好像不起作用？

• TS 配置文件

  import type { UserConfig } from "vite";
  export default {
    // ...
  } satisfies UserConfig;
  

多环境配置文件集成

基本配置

import { defineConfig } from "vite";

import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";

export default defineConfig(({ command, mode, isSsrBuild }) => {
  if (command === "serve") {
    return {
      ...viteBaseConfig,
      ...viteDevConfig,
    };
  } else {
    return {
      ...viteBaseConfig,
      ...viteProdConfig,
    };
  }
});

策略模式

const envResolver = {
  serve: () => {
    console.log("开发环境");
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
  build: () => {
    console.log("生产环境");
    return Object.assign({}, viteBaseConfig, viteProdConfig);
  },
};
export default defineConfig(({ command, mode }) => {
  return envResolver[command]();
});