app.config

每个应用程序实例都会公开一个config包含该应用程序配置设置的对象。您可以在安装应用程序之前修改其属性（如下所述）。

import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

app.config.errorHandler

为从应用程序内部传播的未捕获错误分配一个全局处理程序。

类型

interface AppConfig { errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` is a Vue-specific error info,
    // e.g. which lifecycle hook the error was thrown in
    info: string
  ) => void
}

细节

错误处理程序接收三个参数：错误、触发错误的组件实例和指定错误源类型的信息字符串。

它可以从以下来源捕获错误：

• 组件渲染
• 事件处理程序
• 生命周期钩子
• setup()功能
• 观察者
• 自定义指令钩子
• 过渡挂钩

例子

app.config.errorHandler = (err, instance, info) => {
  // handle error, e.g. report to a service
}

app.config.warnHandler

为来自 Vue 的运行时警告分配一个自定义处理程序。

类型

interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

细节

警告处理程序接收警告消息作为第一个参数，源组件实例作为第二个参数，组件跟踪字符串作为第三个参数。

它可用于过滤掉特定的警告以减少控制台的冗长。所有 Vue 警告都应在开发期间解决，因此仅建议在调试会话期间关注许多特定警告，并且应在调试完成后将其删除。

提示：警告仅在开发期间有效，因此在生产模式下会忽略此配置。

例子

app.config.warnHandler = (msg, instance, trace) => {
  // `trace` is the component hierarchy trace
}

app.config.performance

将此设置为 true 在浏览器开发工具性能/时间线面板中启用组件初始化、编译、渲染和修补性能跟踪。仅适用于开发模式和支持 performance.mark API 的浏览器。

类型

boolean

app.config.compilerOptions

配置运行时编译器选项。在此对象上设置的值将传递给浏览器内模板编译器，并影响已配置应用程序中的每个组件。请注意，您还可以使用选项在每个组件的基础上覆盖这些compilerOptions选项。

此配置选项仅在使用完整版本（即vue.js可以在浏览器中编译模板的独立版本）时受到尊重。如果您在构建设置中使用仅运行时构建，则必须改为@vue/compiler-dom通过构建工具配置传递编译器选项。

For vue-loader：通过compilerOptions加载器选项传递。另请参阅如何在vue-cli.
对于vite：通过@vitejs/plugin-vue选项。

app.compilerOptions.isCustomElement

指定一个检查方法来识别本机自定义元素。

类型

(tag: string) => boolean

细节

如果标签应被视为本机自定义元素，则应返回true。对于匹配的标签，Vue 会将其呈现为原生元素，而不是尝试将其解析为 Vue 组件。

本机 HTML 和 SVG 标签不需要在此函数中匹配- Vue 的解析器会自动识别它们。

例子

// treat all tags starting with 'ion-' as custom elements
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-')
}

app.compilerOptions.whitespace

调整模板空白处理行为。

类型

'condense' | 'preserve'

默认：'condense'

细节

Vue 删除/压缩模板中的空白字符以产生更有效的编译输出。默认策略是“浓缩”，具有以下行为：

1. 元素内的前导/结束空白字符被压缩成一个空格。
2. 包含换行符的元素之间的空白字符被删除。
3. 文本节点中连续的空白字符被压缩成一个空格。

将此选项设置为'preserve'将禁用(2)和(3)。

例子

app.config.compilerOptions.whitespace = 'preserve'

app.compilerOptions.delimiters

调整用于模板内文本插值的分隔符。

类型

[string, string]

默认：['{{','}}']

细节

这通常用于避免与也使用 mustache 语法的服务器端框架发生冲突。

例子

// Delimiters changed to ES6 template string style
app.config.compilerOptions.delimiters = ['${', '}']

app.compilerOptions.comments

调整模板中 HTML 注释的处理方式。

类型

boolean

默认： false

细节

默认情况下，Vue 会删除生产环境中的注释。将此选项设置为true将强制 Vue 即使在生产中也保留评论。在开发过程中始终保留注释。当 Vue 与其他依赖 HTML 注释的库一起使用时，通常会使用此选项。

例子

app.config.compilerOptions.comments = true

app.config.globalProperties

可用于注册全局属性的对象，可在应用程序内的任何组件实例上访问这些属性。

类型

interface AppConfig {
  globalProperties: Record
}

细节

Vue.prototype 这是 Vue 3中不再存在的 Vue 2 的替代品。与任何全局的东西一样，应该谨慎使用它。

如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

用法

app.config.globalProperties.msg = 'hello'

这使得 msg 应用程序中的任何组件模板以及 this 任何组件实例中都可用：

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

app.config.optionMergeStrategies

用于定义自定义组件选项的合并策略的对象。

类型

interface AppConfig {
  optionMergeStrategies: Record
}

type OptionMergeFunction = (to: unknown, from: unknown) => any

细节

一些插件/库添加了对自定义组件选项的支持（通过注入全局混合）。当同一个选项需要从多个来源（例如 mixins 或组件继承）“合并”时，这些选项可能需要特殊的合并逻辑。

合并策略函数可以通过 app.config.optionMergeStrategies 使用选项的名称作为键将其分配到对象上来为自定义选项注册。

合并策略函数接收在父实例和子实例上定义的选项的值，分别作为第一个和第二个参数。

例子

const app = createApp({
  // option from self
  msg: 'Vue',
  // option from a mixin
  mixins: [
    {
      msg: 'Hello '
    }
  ],
  mounted() {
    // merged options exposed on this.$options
    console.log(this.$options.msg)
  }
})

// define a custom merge strategy for `msg`
app.config.optionMergeStrategies.msg = (parent, child) => {
  return (parent || '') + (child || '')
}

app.mount('#app')
// logs 'Hello Vue'

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com