Vue CLI是一个基于Vue.js进行快速开发的工具,它集成了一系列开箱即用的插件,可以帮助我们在开发过程中快速地搭建起项目的框架结构,并且提供了许多便捷的命令行工具,使用Vue CLI能够快速提升我们项目开发的效率。
然而,在使用Vue CLI过程中,会发现有些依赖包在vendor文件夹中并没有出现,这在我们开发过程中会造成一些不便,甚至会导致项目无法正常运行。在Vue CLI中,vendor文件夹是存放第三方依赖库的位置,那么为什么会出现有些库没有放在vendor文件夹中呢?
module.exports = {
configureWebpack: {
externals: {
'element-ui': 'ELEMENT'
}
}
}
原因在于这些依赖库有些并不是我们直接使用的,比如一些UI库,例如element-ui,它是一个第三方的UI库,我们一般情况下只是引用它提供的组件,而不是直接调用它内部代码的。这种情况下,我们可以通过在vue.config.js文件中添加externals来解决这个问题。
module.exports = {
configureWebpack: {
externals: {
'element-ui': 'ELEMENT'
}
}
}
这段代码的意思是告诉webpack,当解析到代码中引用了'element-ui'时,直接使用'window.ELEMENT',而不是去查找'node_modules'文件夹中的相关代码。这么做的好处是可以减少打包后的文件体积,提高打包的速度同时减少了打包后的文件数量。
除了UI库之外,还有一些其他的库也没有放在vendor文件夹中,比如axios、lodash等。这些库一般作为依赖的方式存在,而不是作为插件或者模块的方式存在。我们在开发过程中需要引用它们提供的一些工具方法,但是并不需要将它们打包到vendor文件夹中。因为这些库是第三方的,如果我们选择打包进去,那么就会导致代码体积过大,打包速度缓慢的问题,而且有些库也不适合作为全局库的形式存在。
所以在使用Vue CLI开发项目时,如果有些依赖库并没有在vendor文件夹中出现,不要惊慌,我们可以通过在vue.config.js文件中使用externals来解决这个问题。同时,需要根据具体情况去判断是否需要将依赖库打包进vendor文件夹中,需要打包的可以通过配置webpack进行操作。