flowable流程移植到新项目时,出现一些前端问题,汇总如下:
PS F:\khxm\NBCIO_VUE> yarn run serve yarn run v1.21.1 $ vue-cli-service serve INFO Starting development server... ERROR Error: Vue packages version mismatch: - vue@2.6.11 (F:\khxm\NBCIO_VUE\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler@2.7.14 (F:\khxm\NBCIO_VUE\node_modules\vue-template-compiler\package.json) This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. Error: Vue packages version mismatch: - vue@2.6.11 (F:\khxm\NBCIO_VUE\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler@2.7.14 (F:\khxm\NBCIO_VUE\node_modules\vue-template-compiler\package.json) This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. at Object.<anonymous> (F:\khxm\NBCIO_VUE\node_modules\vue-template-compiler\index.js:10:9) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at loadFromContext (F:\khxm\NBCIO_VUE\node_modules\@vue\cli-service\node_modules\vue-loader\lib\compiler.js:30:10) at loadTemplateCompiler (F:\khxm\NBCIO_VUE\node_modules\@vue\cli-service\node_modules\vue-loader\lib\compiler.js:37:12) at exports.resolveCompiler (F:\khxm\NBCIO_VUE\node_modules\@vue\cli-service\node_modules\vue-loader\lib\compiler.js:25:23) at webpack (F:\khxm\NBCIO_VUE\node_modules\webpack\lib\webpack.js:51:13) at serve (F:\khxm\NBCIO_VUE\node_modules\@vue\cli-service\lib\commands\serve.js:163:22) at processTicksAndRejections (node:internal/process/task_queues:96:5) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. PS F:\khxm\NBCIO_VUE> yarn install yarn install v1.21.1 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by u nsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.3.2: The platform "win32" is incompatible with this module. info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "win32" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.3: The platform "win32" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies...
原因:版本不匹配,需要将vue改成和vue-template-compiler一样的版本
或改 vue或修改vue-template-compiler
我把下面两个组件都修改成2.7.14
"vue": "^2.7.14", "vue-template-compiler": "^2.7.14"
,
后来出现下面问题
ERROR Failed to compile with 2 errors These dependencies were not found: ervice/node_modules/vue-loader/lib??vue-loader-options!./src/components/ProcessViewer/index.vue?vue&type=script&lang=js& * diagram-js/lib/util/Mouse in ./src/plugins/package/designer/plugins/content-pad/contentPadProvider.js To install them, you can run: npm install --save diagram-js/lib/navigation/movecanvas diagram-js/lib/util/Mouse
看是找不到对应的css,后来看modules里没有install diagram-js ,把package-lock.json和 yarn.lock 删除后,重新yarn install就好了
找不到对象,后来看到时api的一些函数有错误引起的。
[Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function" found in ---> <ElButton> at packages/button/src/button.vue <ElTableRow> <ElTableBody> <ElTable> at packages/table/src/table.vue <ElCol> <ElRow> <Anonymous> <Anonymous> <Portal> <PortalWrapper> <Anonymous> <AModal> <ACard> <SysCustomFormList> at src/views/flowable/SysCustomFormList.vue <RouteView> at src/components/layouts/RouteView.vue <Anonymous>