Vue.config是一個對象,包含Vue的全局配置,可以在啟動應用之前修改下列屬性,如下:
ptionMergeStrategies ;自定義合並策略的選項
silent ;是否關閉警告,默認為false,如果設置true,那么將不會有各種報錯
productionTip ;開發模式下是否在控制台顯示生產提示,即一條You are running Vue in development mode提示,設置false,即可關閉該提示
devtools ;是否允許vue-devtools(Vue調試神器)檢查代碼,瀏覽器環境下為true
performance ;是否開啟性能追蹤,只有在開發模式和支持 performance.mark API 的瀏覽器上才有效
errorHandler ;指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時,可獲取錯誤信息和 Vue 實例。
warnHandler ;Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效,在生產環境下它會被忽略。
ignoredElements ;忽略某些自定義元素
keyCodes ;給v-on 自定義鍵位別名。
isReservedTag ;保留標簽,如有,則這些標簽不能注冊成為組件
例如當我們直接引入vue的js文件時:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document</title> </head> <body> </body> </html>
在控制台會輸出提示信息,如下:
writer by:大沙漠 QQ:22969969
在開發模式下,會輸出一條消息提示,如果我們設置 productionTip 為false即可關閉這條提示,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document</title> </head> <body> <script>Vue.config.productionTip=false</script> </body> </html>
、在Vue的官網也是設置productionTip配置屬性為false實現關閉消息提示的:
注意:我們只能修改vue.config里的某個屬性,而不能直接修改config,這樣要報錯的,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document</title> </head> <body> <script>Vue.config={productionTip:false}</script> </body> </html>
報錯:[Vue warn]: Do not replace the Vue.config object, set individual fields instead.
源碼分析
Vue內部會執行一個initGlobalAPI(Vue)函數,Vue就是匿名函數表達式里的Vue函數對象(不懂可以回頭看看第一節代碼結構),如下:
function initGlobalAPI (Vue) { //在第5016行 // config var configDef = {}; configDef.get = function () { return config; }; //Vue.config會獲取config全局變量 { configDef.set = function () { //設置Vue.config時直接報錯,即不允許設置Vue.config值 warn( 'Do not replace the Vue.config object, set individual fields instead.' ); }; } Object.defineProperty(Vue, 'config', configDef); //通過ES5的defineProperty設置Vue的config的訪問器屬性,獲取Vue.config時會執行configDef.get函數,設置Vue.config時會執行configDef.set函數 /*中間省略*/ }
config是一個全局對象,定義在vue.js開始的361行,如下:
var config = ({ //第361行 /** * Option merge strategies (used in core/util/options) */ // $flow-disable-line optionMergeStrategies: Object.create(null), /** * Whether to suppress warnings. */ silent: false, /** * Show production mode tip message on boot? */ productionTip: "development" !== 'production', //這就是剛剛我們測試的例子對應的屬性 /** * Whether to enable devtools */ devtools: "development" !== 'production', /** * Whether to record perf */ /*其余省略*/ })