如何实现vue大型项目按模块运行或打包的多种长尾词方案？

本文共计1834个文字，预计阅读时间需要8分钟。

以vue-cli3为例，实现多系统集成的模块打包。模块打包方式多样，适用于多系统间的互不干扰，主系统可集成各子系统，子系统也可独立运行的业务场景。

本文以vue-cli3+为例，实现多系统集成下的分模块打包。分模块打包方式多种多样，下文可适用于多系统之间互不干扰，主系统可集成各子系统，各子系统又可单独运行的业务场景。

一、目标

我们要实现什么？所谓分模块打包，那么各个模块内就必须得有自己独立的入口文件，路由文件。按照这种构想，我在一个新的脚手架src目录下新建了一个projects目录：

如上图，可以看到Aproject、B、C、D四个项目。我在A项目中建了assets，common和views文件夹，其中assets可以再建img和css的文件夹，common内可以放公共组件或者方法，views页面可以放页面，甚至你还可以建一个components文件夹专门用来放组件。

好了，我们的视图目录结构大概就是上面的样子。我们期待的是，我们可以打包这个A模块这个‘小vue'，就像打包一个完整vue的项目一样。那么如何实现这部分呢？

二、打包单个模块

我们知道，在package.json中，有项目启动，打包的命令。

我们可以从这里入手。

这里就不得不提到cross-env这个模块了。
我们之前在设置生产环境，测试环境，开发环境时也会用到这个模块。在这里不详细表述了。