vue多页应用基础工程搭建

前言
本文将介绍一下vue项目的模块化方案，主要是针对手机端的页面，使用Vue CLI构建项目。一个前端架构的App一般会有很多不同的模块，能够将模块分开开发打包发布是一个vue工程的基础架构。Vue CLI的pages对象是支撑这一架构的核心。

在阅读文章之前必须先熟悉 Vue CLI和 node.js
工程中不少配置都参考了这两块的知识点。
开发工具
Hbuilder X 3.1.13
@vue/cli 4.5.13

工程目录介绍

如何创建一个模块
一、在modules.config.js配置文件中最上面找到moduleArray数组，添加一条数据作为新的模块的配置。

const moduleArray = [
  { moduleName: 'discounts', title: '打折' },
  { moduleName: 'activity', title: '活动' },
];

二、在工程的modules文件夹下新建新的文件夹（文件夹名必须与第一步modules.config.js文件里面配置的moduleName匹配）作为你新创建的模块。模块内部的文件目录必须与工程演示的例如activity模块保持一致。也可以直接将activity文件夹整个拷贝一份改改名字。

调试

• 代理配置
  使用npm run serve调试的时候，为了从服务器获取数据同时也为了解决可能的跨域问题需要配置proxy代理。
  相关配置参照proxy.config.js文件，devHost就是调试过程中的代理地址。开发过程中按照自己的实际情况修改。
• 浏览器打开相关模块的页面
  使用(http://localhost:8080/[模块名]#/[模块首页]) 的地址打开相关模块页面进行调试。
  例如activity模块首页的地址为：http://192.168.2.5:8080/activity#/activityIndex

---

打包
使用 npm run build [模块名] 打包单个模块。
例如我们只需要打包activity模块，命令为：npm run build activity 。
使用 npm run build:all 打包所有模块。

查看package.json文件scripts脚本可以看到，相关脚本相比Vue CLI原始工程的脚本已经做了修改。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "node ./config/build.js --mode production",
    "build:all": "node ./config/build.js --mode production --all",
    "lint": "vue-cli-service lint",
    "inspect": "vue inspect > webpack.inspect.json"
  }

build和build:all是通过node运行config文件夹下的build.js文件来实现模块化打包的。build.js文件主要实现了打包之前的文件删除，打包命令解析，打包子进程的管理等操作。

github: 工程代码
网盘： 工程代码 密码: 0u0r

参考：
http://nodejs.cn/api/child_process.html
https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md#声明-program-变量
https://segmentfault.com/a/1190000016788484
https://segmentfault.com/a/1190000011831802
https://xwenliang.cn/p/5acf36bef4c855403a000002
https://www.npmjs.com/package/ora
https://blog.csdn.net/weixin_38203203/article/details/104329844
https://www.cnblogs.com/xwwblog/p/13606604.html
https://www.cnblogs.com/xbzhu/p/11815197.html
https://segmentfault.com/q/1010000016925412
https://segmentfault.com/a/1190000007294861#articleHeader9
https://segmentfault.com/q/1010000019161214?utm_source=sf-similar-question
https://www.cnblogs.com/love314159/p/14234058.html