1. Vue2全局配置Vue.config

478 阅读3分钟

Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列 property:

image.png

image.png

1. silent —— 取消 Vue 所有的日志与警告。

  • 类型boolean

  • 默认值false

  • 用法

    Vue.config.silent = true 
    

    取消 Vue 所有的日志(vue tip)与警告(vue warn)。

    image.png

2. optionMergeStrategies——父实例和子实例上的同一选项进行合并

  • 类型{ [key: string]: Function }

  • 默认值{}

  • 用法

    Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
      return child + 1
    }
    
    const Profile = Vue.extend({
       _my_option: 1
    })
    
    // Profile.options._my_option = 2
    

    image.png 自定义合并策略的选项。

    合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数,Vue 实例上下文被作为第三个参数传入。

    image.png

    image.png

  • 参考自定义选项的混入策略

3. devtools——是否允许 vue-devtools 检查代码

  • 类型boolean

  • 默认值true (生产版为 false)

  • 用法

    // 务必在加载 Vue 之后,立即同步设置以下内容
    Vue.config.devtools = true
    

    配置是否允许 vue-devtools 检查代码。开发版本默认为 true,生产版本默认为 false。生产版本设为 true 可以启用检查。

image.png

4. errorHandler——组件错误的处理函数

  • 类型Function

  • 默认值undefined

  • 用法

    Vue.config.errorHandler = function (err, vm, info) {   
        // handle error   
        // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子   
    }
    

    指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。

    从 Vue2.2.0 起,这个钩子也会捕获组件生命周期钩子里的错误。同样的,当这个钩子是 undefined 时,被捕获的错误会通过 console.error 输出而避免应用崩溃。

    从 2.4.0 起,这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。

    从 2.6.0 起,这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外,如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise 链的错误也会被处理。

    错误追踪服务 Sentry 和 Bugsnag 都通过此选项提供了官方支持。

    image.png

5. warnHandler——处理Vue 运行时警告的函数

  • 类型Function

  • 默认值undefined

  • 用法

    Vue.config.warnHandler = function (msg, vm, trace) {   
      // `trace` 是组件的继承关系追踪 
    } 
    

    为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效,在生产环境下它会被忽略。

    image.png

6. ignoredElements——忽略在 Vue 之外的自定义元素

  • 类型Array<string | RegExp>

  • 默认值[]

  • 用法

    Vue.config.ignoredElements = [   
        'my-custom-web-component',   'another-web-component',   
        // 用一个 `RegExp` 忽略所有“ion-”开头的元素   
        /^ion-/ 
    ] 
    

    使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则,它会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于 Unknown custom element 的警告。

    image.png

7. keyCodes—— 给 v-on 自定义键盘按键的别名

  • 类型{ [key: string]: number | Array<number> }

  • 默认值{}

  • 用法

    Vue.config.keyCodes = {   
        v: 86,   
        f1: 112,   
        // camelCase 不可用   
        mediaPlayPause: 179,   
        // 取而代之的是 kebab-case 且用双引号括起来   
        "media-play-pause": 179,   
        up: [38, 87] 
    } 
    
    <input type="text" @keyup.media-play-pause="method"> 
    

    给 v-on 自定义键位别名。

    image.png

8. performance——浏览器开发工具的性能追踪

  • 类型boolean

  • 默认值false (自 2.2.3 起)

  • 用法

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

    image.png

9. productionTip——阻止 vue 在启动时生成生产提示

  • 类型boolean

  • 默认值true

  • 用法

    设置为 false 以阻止 vue 在启动时生成生产提示。

    image.png

    image.png