从懵懂到豁然：解决 Vite 动态配置问题

2023-11-24 05:36:48

背景

在使用 Vite 初始化 Vue3 项目时，我遇到了一个问题：动态配置项不生效。起初，我感到非常困惑，因为我按照官方文档中的步骤进行操作，但结果却不如预期。于是，我决定展开一次深入浅出的问题调试之旅，最终找到了解决办法。

问题分析

在 Vite 中，动态配置项是指在运行时可以改变的值。例如，我们可以通过在 vite.config.js 文件中使用 defineConfig 函数来定义动态配置项。以下是使用 defineConfig 函数定义动态配置项的示例：

import { defineConfig } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据命令行参数或模式设置不同的配置
  if (command === 'build') {
    return {
      // build 时使用的配置
    }
  } else {
    return {
      // dev 时使用的配置
    }
  }
})

然而，当我按照这个示例进行操作时，我发现动态配置项并没有生效。经过一番排查，我发现问题出在 defineConfig 函数的参数上。在官方文档中，参数被为一个包含 command 和 mode 两个属性的对象。然而，在我实际使用中，我发现参数是一个函数，而不是对象。

解决方法

在发现问题所在后，我查阅了 Vite 的源代码，并找到了问题的根源。原来，在 Vite 2.0 版本中，defineConfig 函数的参数类型发生了变化。在 Vite 1.0 中，参数是一个对象，而在 Vite 2.0 中，参数是一个函数。

为了解决这个问题，我将 defineConfig 函数的参数从对象改成了函数。以下是我修改后的代码：

import { defineConfig } from 'vite'

export default defineConfig((command, mode) => {
  // 根据命令行参数或模式设置不同的配置
  if (command === 'build') {
    return {
      // build 时使用的配置
    }
  } else {
    return {
      // dev 时使用的配置
    }
  }
})