vite配置实现动态配置根据不同的编译环境来实现

130 阅读1分钟

vite官方配置链接说明:配置 Vite | Vite 官方中文文档

如果配置文件需要基于(serve 或 build)命令或者不同的 模式 来决定选项,亦或者是一个 SSR 构建(isSsrBuild)、一个正在预览的构建产物(isPreview),则可以选择导出这样一个函数:

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

其中 command, mode, isSsrBuild, isPreview 参数分别代表不同的编译命令/编译模式/是不是ssr/是不是preview,command就是dev / server / build等,mode就是配置的 test / prod 或者是默认的模式,例如:

拿到这些参数之后,我们就可以动态不同的参数来判断是什么环境,然后根据不同的环境来返回不同的配置:

比如我这里根据不同的环境使用不同的baseUrl: