使用場景

mpvue框架與原生小程序開發框架混用

實踐背景

項目開始完全使用mpvue開發，但是上線後發現有個表單頁面雙向綁定有問題（頁面改變，但是值不改變），嘗試多種方式仍未解決，遂使用原生小程序框架進行替換

基本思路

得益於小程序較好的分包機制，只需要將用原生框架開發的信息頁面的包(文件夾)移動到對應目錄，然後修改打包後app.json中pages頁面路徑即可。原理比較簡單，主要解決是流程繁瑣的問題。每次改動都需要移動文件夾，修改json，且修改頁面devServer熱更新基本處於殘廢狀態，不勝其煩！

解決思路

mpvue使用webpack編譯打包，功能十分強大，所以就使用webpack來解決

• 新建mpvue項目
• 將原生編寫包放入和正常mpvue頁面相同目錄（src/pages），並在app.json添加路由（和正常mpvue一樣，本地目錄有文件，所以配置路由後不會報錯。另外，一般情況下會開啓eslint，小程序語法和vue不一樣，會報錯，所以可以在原生頁面js文件頭增加/* eslint-disable */）
• 安裝FileManagerPlugin webpack插件，該插件可以移動/複製/新增/刪除等文件或目錄，參考filemanager-webpack-plugin
• 修改webpack.base.conf配置，引入插件var FileManagerPlugin = require('filemanager-webpack-plugin');，在plugins增加如下配置

new FileManagerPlugin({  
  onEnd: {  
    delete: [  
      path.resolve(config.build.assetsRoot, './pages/info'),  
 path.resolve(config.build.assetsRoot, './components/info-cell'),  
 ],  
 copy: [  
      {  
        source: path.resolve(__dirname, '../src/pages/info'),  
 destination: path.resolve(config.build.assetsRoot, './pages/info')  
      },  
 {  
        source: path.resolve(__dirname, '../src/components/info-cell'),  
 destination: path.resolve(config.build.assetsRoot, './components/info-cell')  
      }  
    ]  
  }  
})

其中：delete是刪除無用目錄（由於我們將原生編寫的包放在了src/pages目錄下，所以啓動或打包時也會將這個打包編譯，我們本來就是用原生小程序編寫的，所以不需要這個），copy是將原生小程序目錄拷貝到dist對應目錄
注：info是原生編寫頁面的包，info-cell是info使用的自定義組件，各位根據實際情況修改

• 以後就可以正常開發了（支持熱更新）