[Vue] 3.x 中 app.config 有哪些应用配置？【热度: 200】

[yanlele]

关键词：app.config 配置

确实，在 Vue 3 中，app.config 提供了一系列的应用级别的配置选项，用于自定义或调整 Vue 应用的行为。你提到的这些配置项都是 app.config 的一部分，下面是关于它们的详细介绍：

app.config.errorHandler

• 作用：为未捕获的异常定义一个全局的处理函数。这在集中处理组件渲染或观察者(watchers)中的异常时非常有用。
• 示例：

app.config.errorHandler = (err, instance, info) => {
  // 处理错误
};

app.config.warnHandler

• 作用：为 Vue 运行时警告定义一个全局的处理函数，允许你在开发过程中自定义处理警告的方式。
• 示例：

app.config.warnHandler = (msg, instance, trace) => {
  // 处理警告
};

app.config.performance

• 作用：开启性能追踪。在开发模式下启用，能够测量和追踪组件的初始化、编译时间等性能指标。
• 示例：

app.config.performance = true;

app.config.compilerOptions

• 作用：允许自定义编译器选项，如模板中的自定义指令等。这对于更细致地控制模板的编译过程很有帮助。
• 示例：

app.config.compilerOptions = {
  // 编译器配置
};

app.config.globalProperties

• 作用：定义全局可用的属性。这在 Vue 2 中通过 Vue.prototype 实现，Vue 3 中通过 app.config.globalProperties 实现。
• 示例：

app.config.globalProperties.$utils = {
  // 一些全局方法或属性
};

app.config.optionMergeStrategies

• 作用：自定义选项的合并策略。允许你为自定义选项指定如何合并父子选项。
• 示例：

  app.config.optionMergeStrategies.myOption = (parent, child) => {
    // 合并策略
  };

app.config.idPrefix

• 作用：配置此应用中通过 useId() 生成的所有 ID 的前缀。由 3.5+ 版本引入。
• 示例：

app.config.idPrefix = "custom-";

// 在组件中：
const id1 = useId(); // 'my-app:0'
const id2 = useId(); // 'my-app:1'

app.config.throwUnhandledErrorInProduction

• 作用：强制在生产模式下抛出未处理的错误。 由 3.5+ 版本引入。

默认情况下，在 Vue 应用中抛出但未显式处理的错误在开发和生产模式下有不同的行为：

在开发模式下，错误会被抛出并可能导致应用崩溃。这是为了使错误更加突出，以便在开发过程中被注意到并修复。

在生产模式下，错误只会被记录到控制台以尽量减少对最终用户的影响。然而，这可能会导致只在生产中发生的错误无法被错误监控服务捕获。

通过将 app.config.throwUnhandledErrorInProduction 设置为 true，即使在生产模式下也会抛出未处理的错误。

这些应用级配置选项提供了对 Vue 应用的高度控制，允许开发者根据实际需要调整 Vue 的默认行为。在使用时，建议根据项目实际情况和需求进行选择性地配置。