vue移动项目代码拆分记录详解

“一套vue被很多用户分享，非常适合需要快速全面上线的项目。然而，多个终端共享一组vue代码。由于平台之间的相互限制，在支付共享等一些服务中，每个终端是完全独立的，每个平台的支付方式也会有所不同，导致在这些服务的实现中，过于冗余的“如果有”判断。因此，为了提高代码的可重用性和可扩展性，可以拆分代码，以applet和App的两端为例，一个用于applet，另一个用于App(androdios)。

首先，代码拆分要保证本地开发时只有一套代码，提取所有公共页面，并分别提取小程序和app的独立JS方法，避免在小程序端开发vue然后粘贴复制到App端的繁琐操作。直接看图片最清楚，拆分前的目录结构：

拆分后的目录结构：

拆分前的项目目录结构

拆分后的项目目录结构

目录拆分后，开始拆分代码。部署到生产环境时，只有App端可以部署App端，applet端可以部署applet端，所以在本地开发过程中，对路由配置文件route.list.JS进行了修改：在拆分代码之前，将所有页面JS文件的相对路径放在一个数组中：

在定义(['之后./XXX/XXX/user.js '，'./XXX/XXX/goods.js '，】)被拆分，数组在route.list.js中按照public、mobile_app、微信_mini进行定义，这样如果现在小程序端的vue正在开发，那么，public和微信_mini的数组合并在一起，在app端开发vue的时候，public和moblie_app的数组合并在一起。ES6扩展运算符(…)用于合并数组。

var public _ goods=[]；var mini _ goods=[]；var app _ goods=[]；var fun=(isWechatMini)={ if(isWechatMini){ return[…public _ goods，…mini _ goods]} else { return[…public _ goods，App _ goods]}}定义(fun (true))将公共部分和独立部分的页面拆分后，进一步分析代码：App端和小程序端大多是相互独立的，比如支付功能、分享功能等。这涉及到需要本机处理的地方，并将出现在多个页面和多个服务中。然后将独立于App的vue代码拆分成一个公共JS (app-common。JS)，将独立于applet的vue代码拆分成一个公共js (mini-common.js)，并将其导入到所需的页面中。以购买和支付商品的功能为例：

拆分前：

define(['vue '，' axios '，' text！/File/Html/goods/goodspay . Html ']，(vue，axios，Template)={ var App={ data() { }，template: Template，mounted() { }，Methods : { pay(){ if(iswechatmini){//这里有一个支付小程序} else {//这里有一个支付App } } } }；返回{ App : App }；});在复杂业务的情况下，会有多层if else，代码过于冗余。

拆分后：

小程序端的商品支付和购买页面：

define(['vue '，' axios '，' text！/File/Html/mini/goods/goodspay . Html '，' mini-common']，(vue，axios，Template，common)={ var App={ data() { }，template: Template，Mounted () {}，方法： { pay(){//调用mini-common中定义的支付方法common . pay()；} } };返回{ App : App }；});App端的产品购买支付页面只需要将引入的JS替换为app-common:

define(['vue '，' axios '，' text！/File/Html/App/goods/goodspay . Html '，' app-common']，(vue，axios，Template，common)={ var App={ data() { }，template: Template，mounded(){ }，Methods: {pay(){ //调用app-common中定义的支付方式common . pay()；} } };返回{ App : App }；});本地开发后，只需要将公共目录和微信_mini中的文件复制粘贴到打包工具进行打包即可，这是小程序端的代码，而app端的代码则打包在公共和mobile_app中。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。