vue大型项目拆分_详解vue移动端项目代码拆分记录

撸一套vue多端共用，非常适合需要快速且全面上线的项目。但是多端共用一套vue代码，由于平台间的互相限制，每端在某些业务例如支付分享等是完全独立的代码，每个平台的支付方式也会有所差异，造成在这些业务的实现过程中会有太冗余的“if else”判断。所以为了提高代码的复用性、扩展性，可以将代码拆分，以-小程序和App两端举例，一份部署到小程序，一份部署到App(Android&Ios)。

首先代码拆分应该保证本地开发的时候只有一套代码，提取所有公共页面，并且分别提取小程序和app的独立JS方法，避免开发完小程序端vue，然后粘贴复制到App端的繁琐操作。

直接看图最清晰，拆分前目录结构：

拆分后目录结构：

拆分前项目目录结构

拆分后项目目录结构

目录拆分好之后，开始拆分代码。由于部署到生产环境的时候只能App端部署App端，小程序端部署小程序端，那么在本地开发过程中为了调试不同端的页面就需要进行路由配置，所以对路由配置文件route.list.js做了修改：

拆分代码前，route.list.js中将所有页面JS文件的相对路径放在一个数组里：

define(

[

‘../xxx/xxx/user.js',

‘../xxx/xxx/goods.js',

…

…

]

)

拆分后，route