vue2项目引入报错 - Githubissues

JackZhangCNCC commented 4 months ago

vue2报错：./node_modules/vue-amis-sdk/lib/vue-amis-sdk.umd.min.js Module parse failed: Unexpected token (11:2511599) You may need an appropriate loader to handle this file type. | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | */ | (function(){"use strict";(function(){if(void 0===window.Reflect||void ... ----------其他vue-amis-sdk.umd.min.js代码----------- @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/FEBS.vue 15:0-38 @ ./src/FEBS.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9530 webpack/hot/dev-server babel-polyfill ./src/main.js 截图：

项目package文件内容： { "name": "febs-front", "version": "1.0.0", "description": "FEBS Front By Vue", "author": "mrbrid https://mrbrid.cc", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" }, "dependencies": { "@antv/x6": "^2.16.1", "@ckeditor/ckeditor5-build-classic": "^40.2.0", "@form-create/designer": "^1.0.10", "@form-create/element-ui": "^2.5.33", "@micro-zoe/micro-app": "^1.0.0-rc.4", "@tinymce/tinymce-vue": "^3.2.4", "@types/ora": "^3.2.0", "@vue-office/docx": "^1.6.0", "@vue-office/excel": "^1.6.0", "@vue-office/pdf": "^1.6.1", "ant-design-vue": "^1.3.7", "apexcharts": "^3.49.0", "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "bpmn-js": "^8.7.1", "cross-env": "^7.0.2", "crypto-js": "^4.1.1", "dagre": "^0.8.5", "date-fns": "^1.29.0", "docx-preview": "^0.3.0", "echarts": "^5.5.0", "element-ui": "^2.15.14", "enquire.js": "^2.1.6", "html2canvas": "^1.4.1", "insert-css": "^2.0.0", "jsonlint": "^1.6.3", "panzoom": "^9.4.3", "ramda": "^0.28.0", "tinymce": "^5.5.1", "v-viewer": "^1.6.4", "vue": "^2.7.16", "vue-apexcharts": "^1.6.2", "vue-demi": "^0.14.7", "vue-quill-editor": "^3.0.6", "vue-router": "^3.0.1", "vue-template-compiler": "^2.7.16", "vue-uuid": "^3.0.0", "vuedraggable": "^2.16.0", "vuex": "^3.0.1", "webpack-cli": "^3.3.11", "xlsx": "^0.18.5" }, "devDependencies": { "@babel/eslint-parser": "^7.24.1", "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-preset-stage-3": "^6.24.1", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "codemirror": "^5.60.0", "compression-webpack-plugin": "^1.1.12", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^9.1.1", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "jsonlint-mod": "^1.7.6", "less": "^3.7.1", "less-loader": "^4.1.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^14.2.4", "vue-style-loader": "^3.0.1", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } 排查好一阵也不知道什么原因，是否是依赖冲突，有没有大佬帮个忙

h7ml commented 4 months ago

看看示例。 https://github.com/dext7r/vue-amis-sdk-examples

JackZhangCNCC commented 4 months ago

看看示例。 https://github.com/dext7r/vue-amis-sdk-examples

我更新了一些依赖现在项目可以正常启动，但是现在编辑器左侧三按钮中的“代码”按钮点击会报错，而且也没有对应生成的json，浏览器报错内容是： Refused to apply style from 'http://localhost:9529/css/2678.775ce48d.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. vue-amis-sdk.umd.min.js:399 Uncaught (in promise) ChunkLoadError: Loading CSS chunk 2678 failed. (error: http://localhost:9529/css/2678.775ce48d.css) at HTMLLinkElement.i (vue-amis-sdk.umd.min.js:399:910318) i @ vue-amis-sdk.umd.min.js:399 Promise.then (async) t.loadMonaco @ vue-amis-sdk.umd.min.js:11 t.wrapperRef @ vue-amis-sdk.umd.min.js:11 Vc @ vue-amis-sdk.umd.min.js:374 t.unstable_runWithPriority @ vue-amis-sdk.umd.min.js:399 lr @ vue-amis-sdk.umd.min.js:374 Hc @ vue-amis-sdk.umd.min.js:374 qc @ vue-amis-sdk.umd.min.js:374 eval @ vue-amis-sdk.umd.min.js:374 t.unstable_runWithPriority @ vue-amis-sdk.umd.min.js:399 lr @ vue-amis-sdk.umd.min.js:374 ur @ vue-amis-sdk.umd.min.js:374 dr @ vue-amis-sdk.umd.min.js:374 L @ vue-amis-sdk.umd.min.js:374 on @ vue-amis-sdk.umd.min.js:374 Show 15 more frames Show less vue-amis-sdk.umd.min.js:399

   GET http://localhost:9529/vue-amis-sdk.umd.min.2678.js net::ERR_ABORTED 404 (Not Found)

webpack_require.l @ vue-amis-sdk.umd.min.js:399 webpack_require.f.j @ vue-amis-sdk.umd.min.js:399 eval @ vue-amis-sdk.umd.min.js:399 __webpack_require__.e @ vue-amis-sdk.umd.min.js:399 t.loadMonaco @ vue-amis-sdk.umd.min.js:11 t.wrapperRef @ vue-amis-sdk.umd.min.js:11 Vc @ vue-amis-sdk.umd.min.js:374 t.unstable_runWithPriority @ vue-amis-sdk.umd.min.js:399 lr @ vue-amis-sdk.umd.min.js:374 Hc @ vue-amis-sdk.umd.min.js:374 qc @ vue-amis-sdk.umd.min.js:374 eval @ vue-amis-sdk.umd.min.js:374 t.unstable_runWithPriority @ vue-amis-sdk.umd.min.js:399 lr @ vue-amis-sdk.umd.min.js:374 ur @ vue-amis-sdk.umd.min.js:374 dr @ vue-amis-sdk.umd.min.js:374 L @ vue-amis-sdk.umd.min.js:374 on @ vue-amis-sdk.umd.min.js:374 Show 18 more frames Show less :9529/#/formManage/formManageAdd:1 Refused to execute script from 'http://localhost:9529/vue-amis-sdk.umd.min.2678.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled 似乎是这些css和js都没有正确的加载？而且官方提到的vue-amis-sdk-examples项目启动后，似乎“代码”按钮也会出现问题

h7ml commented 4 months ago

查看源码哪里是 monaco 的问题。在生产环境存在该问题。但是本地不会有这个报错

h7ml commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：https://amis-vite-react.h7ml.cn/ webpack 技术栈的话可以考虑：https://amis-editor-webpack.h7ml.cn/ 。适配了乾坤子应用

JackZhangCNCC commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：https://amis-vite-react.h7ml.cn/ webpack 技术栈的话可以考虑：https://amis-editor-webpack.h7ml.cn/ 。适配了乾坤子应用

谢谢您的提议，react那个示例我用过，的确很丝滑。但我我们没办法改项目框架，项目必须用vue2，所以才来试这个vue的sdk，看来和amis无缘了

JackZhangCNCC commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：https://amis-vite-react.h7ml.cn/ webpack 技术栈的话可以考虑：https://amis-editor-webpack.h7ml.cn/ 。适配了乾坤子应用

谢谢您的提议，react那个示例我用过，的确很丝滑。但我我们没办法改项目框架，项目必须用vue2，所以才来试这个vue的sdk，看来和amis无缘了

补充提问一下，是否可以采用微前端的方式来实现vue2流畅的使用amis-editor？vue2项目作为基座项目，react-amis作为子项目这样子

h7ml commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：amis-vite-react.h7ml.cn webpack 技术栈的话可以考虑：amis-editor-webpack.h7ml.cn 。适配了乾坤子应用

谢谢您的提议，react那个示例我用过，的确很丝滑。但我我们没办法改项目框架，项目必须用vue2，所以才来试这个vue的sdk，看来和amis无缘了

补充提问一下，是否可以采用微前端的方式来实现vue2流畅的使用amis-editor？vue2项目作为基座项目，react-amis作为子项目这样子

这个sdk 已经一年多没维护了。我这几天更新适配下。

JackZhangCNCC commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：amis-vite-react.h7ml.cn webpack 技术栈的话可以考虑：amis-editor-webpack.h7ml.cn 。适配了乾坤子应用

谢谢您的提议，react那个示例我用过，的确很丝滑。但我我们没办法改项目框架，项目必须用vue2，所以才来试这个vue的sdk，看来和amis无缘了

补充提问一下，是否可以采用微前端的方式来实现vue2流畅的使用amis-editor？vue2项目作为基座项目，react-amis作为子项目这样子

这个sdk 已经一年多没维护了。我这几天更新适配下。

那可太感谢您了！这一周多一直捣鼓我们这vue2项目使用amis编辑器的事儿，各种不能用，这下有希望了

h7ml commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：amis-vite-react.h7ml.cn webpack 技术栈的话可以考虑：amis-editor-webpack.h7ml.cn 。适配了乾坤子应用

谢谢您的提议，react那个示例我用过，的确很丝滑。但我我们没办法改项目框架，项目必须用vue2，所以才来试这个vue的sdk，看来和amis无缘了

补充提问一下，是否可以采用微前端的方式来实现vue2流畅的使用amis-editor？vue2项目作为基座项目，react-amis作为子项目这样子

有个 amis 交流qq群：717791727 你可以先去问问

JackZhangCNCC commented 4 months ago

最好的体验是使用 react 进行集成。因为react 对amis 更加友好，可以使用最新的amis版本。请见：amis-vite-react.h7ml.cn webpack 技术栈的话可以考虑：amis-editor-webpack.h7ml.cn 。适配了乾坤子应用

谢谢您的提议，react那个示例我用过，的确很丝滑。但我我们没办法改项目框架，项目必须用vue2，所以才来试这个vue的sdk，看来和amis无缘了

补充提问一下，是否可以采用微前端的方式来实现vue2流畅的使用amis-editor？vue2项目作为基座项目，react-amis作为子项目这样子

有个 amis 交流qq群：717791727 你可以先去问问

ok~

h7ml commented 4 months ago

vwebpack 技术栈的话。你可以看看 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#webpack-%E9%85%8D%E7%BD%AE%E5%8F%82%E8%80%83 这个构建项， vite 目前集成 monaco-editor 都会有问题。

h7ml commented 4 months ago

最新在vue2中集成有个小 demo https://github.com/dext7r/amis-adapter/blob/main/examples/vue-editor2.7/src/components/AmisEditor.vue 你可以先看看。

https://github.com/dext7r/amis-adapter/blob/8c10f11fd7432711f5de9a877f8515214509f8a6/examples/vue-editor2.7/package.json#L11-L19

h7ml commented 4 months ago

最新在vue2中集成有个小 demo [dext7r/amis-adapter@8c10f11/examples/vue-editor2.7/package.json#L11-L19]() 你可以先看看。

https://github.com/dext7r/amis-adapter/blob/main/examples/vue-editor2.7/src/components/AmisEditor.vue#L4

JackZhangCNCC commented 4 months ago

最新在vue2中集成有个小 demo dext7r/amis-adapter@8c10f11/examples/vue-editor2.7/package.json#L11-L19 你可以先看看。

https://github.com/dext7r/amis-adapter/blob/main/examples/vue-editor2.7/src/components/AmisEditor.vue#L4

oh, thank you, sir♂

dext7r / vue-amis-sdk

vue2项目引入报错 #203