vue.js学习之vue-cli定制脚手架详解

前言

年初的时候公司的老后台系统实在难以维护和继续在其上开发了，因为这个系统被很多人写过页面，有前端有后端，编写前端代码时都非常随意，加之没有模块化，复用性和可维护性都极低，便下定决定，重新搞一套。

经过一段时间的调研选择了vue全家桶+elementUI来开发后台系统，让交互体验更好，让开发体验更好，让生产效率提高。

从零搭建其实考虑的事情还挺多的，比如：

• 如何管理代码仓库
• 开发环境，测试环境搭建
• 如何接入公司的打包上线流程
• 如何目录划分
• 如何划分模块
• 登录和权限如何做

这篇文章来记录下和脚手架相关的改造，首先其实就是上了vue-cli来做，可是呢？由于预计项目会有很多页面，这些页面其实是分模块的，不同模块的页面之前其实关系不大。所以我觉得一个用户其实大部分时候只会用到其中一个模块的页面，如果把所有页面做成一个单页应用很多资源加载就不是很必要了，所以第一个改造就是：做成多入口打包，也就是做成多个单页应用，每个模块一个入口。

/build/utils

/build/webpack.base.conf

/build/webpack.dev.conf

/build/weback.prod.conf

这样就完成了多页面的入口配置，其核心就是两点：1. 入口配置成数组。2. plugins里面添加多个HtmlWebpackPlugin分别对应每一个页面，完成js打包后路径的自动注入功能。

这里还有个地方需要注意，就是抽取公用的js和css代码出来，这里做了一下改造，就是echarts指定提取出来，而不是按引用次数那种自动提取,这里还踩了个坑，详细见注释。

在webpack.prod.conf的plugins里面加入：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对编程之家的支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!