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.list.js中按public、mobile_app、wechat_mini 分別定義數組，這樣如果現在正在開發小程序端的vue，那麼則將public和wechat_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
    ]//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 
  } else {
    return [
     …public_goods,
     …app_goods
    ]
  }
}
define(
  fun(true)
)

將公共部分和獨立部分的頁面拆分之後，進一步分析代碼：App端和小程序端相互獨立的大多是支付功能，分享功能等涉及到需要原生處理的地方，並且會在多個頁面，多個業務中出現，那麼就將App獨立的vue代碼拆分到一個公共JS中（app-common.js），將小程序獨立的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支付
       }
     }
   }
  }; 
  return{
    app: App
  };   
});

業務複雜的情況下，會有多層if else，代碼太冗餘。
拆分後：
小程序端的商品支付購買頁面：

define([‘vue', ‘axios', ‘text!/File/Html/mini/goods/goodsPay.html', ‘mini-common'], (vue, axios, Template, common) => {
  var App = {//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 
    data() { 
    },
  template: Template,
  mounted() { 
  },
  methods: {
     pay(){
       //調用mini-common中定義的支付方法
       common.pay();
     }
  }
 }; 
 return{
  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,
  mounted() { 
  },
  methods: {
    pay(){
      //調用app-common中定義的支付方法
      common.pay();
    }
   }
  };
  return{
   app: App
  };  
});

本地開發完後，部署到服務器只需要將public目錄下和wechat_mini下的文件複製粘貼到打包工具打包即是小程序端的代碼，public和mobile_app打包即是app端的代碼。

結語

感謝您的觀看，如有不足之處，歡迎批評指正。
獲取資料👈👈👈
本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：👉👉👉619586920，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。