Vue CLI是一個基于Vue.js進行快速開發(fā)的工具,它集成了一系列開箱即用的插件,可以幫助我們在開發(fā)過程中快速地搭建起項目的框架結(jié)構(gòu),并且提供了許多便捷的命令行工具,使用Vue CLI能夠快速提升我們項目開發(fā)的效率。
然而,在使用Vue CLI過程中,會發(fā)現(xiàn)有些依賴包在vendor文件夾中并沒有出現(xiàn),這在我們開發(fā)過程中會造成一些不便,甚至會導致項目無法正常運行。在Vue CLI中,vendor文件夾是存放第三方依賴庫的位置,那么為什么會出現(xiàn)有些庫沒有放在vendor文件夾中呢?
module.exports = {
configureWebpack: {
externals: {
'element-ui': 'ELEMENT'
}
}
}
原因在于這些依賴庫有些并不是我們直接使用的,比如一些UI庫,例如element-ui,它是一個第三方的UI庫,我們一般情況下只是引用它提供的組件,而不是直接調(diào)用它內(nèi)部代碼的。這種情況下,我們可以通過在vue.config.js文件中添加externals來解決這個問題。
module.exports = {
configureWebpack: {
externals: {
'element-ui': 'ELEMENT'
}
}
}
這段代碼的意思是告訴webpack,當解析到代碼中引用了'element-ui'時,直接使用'window.ELEMENT',而不是去查找'node_modules'文件夾中的相關代碼。這么做的好處是可以減少打包后的文件體積,提高打包的速度同時減少了打包后的文件數(shù)量。
除了UI庫之外,還有一些其他的庫也沒有放在vendor文件夾中,比如axios、lodash等。這些庫一般作為依賴的方式存在,而不是作為插件或者模塊的方式存在。我們在開發(fā)過程中需要引用它們提供的一些工具方法,但是并不需要將它們打包到vendor文件夾中。因為這些庫是第三方的,如果我們選擇打包進去,那么就會導致代碼體積過大,打包速度緩慢的問題,而且有些庫也不適合作為全局庫的形式存在。
所以在使用Vue CLI開發(fā)項目時,如果有些依賴庫并沒有在vendor文件夾中出現(xiàn),不要驚慌,我們可以通過在vue.config.js文件中使用externals來解決這個問題。同時,需要根據(jù)具體情況去判斷是否需要將依賴庫打包進vendor文件夾中,需要打包的可以通過配置webpack進行操作。