应用场景
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应用的自定义组件，各位依据理论状况批改
- 当前就能够失常开发了（反对热更新）