Closed citynook closed 1 year ago
进入 amis-editor 编辑器后,vscode控制台报错:无法读取 file://xxxxxx 在错误信息指示的路径:node_modules.pnpm\monaco-editor@0.30.1\node_modules\monaco-editor\esm\vs\base\browser\dompurify 存在 dompurify.js 这个文件,不清楚为什么会发生这个错误。
编辑器的【代码】窗口中,将一些属性标识成不支持的属性。这个问题在官网代码中没有发生,在自建的项目中会发生,不清楚哪里没有正确加载 monaco-editor。
请问在自建的 vite3 项目中使用 amis-editor,要添加哪些引用才能正确地初始化 monaco-editor 组件并使用 amis-editor编辑器,确保【代码】窗口中能不会将正确的属性识别为不支持。本人使用 amis 编辑器使用的引用如下:
import themeConfig from 'amis-theme-editor-helper/lib/systemTheme/cxd'; import '@fortawesome/fontawesome-free/css/all.css'; import '@fortawesome/fontawesome-free/css/v4-shims.css'; import 'amis/lib/themes/cxd.css'; import 'amis/lib/helper.css'; import 'amis/sdk/iconfont.css'; import 'amis-editor-core/lib/style.css'; setThemeConfig(themeConfig);
你是如何使用 amis 的? 在vite3 + vue 项目中,使用 veaury 组件加载 amis-editor 编辑器。
amis 版本是什么?请先在最新 beta 版本测试问题是否存在 amis: 3.4.2 amis-editor: 5.6.1 vite3: 4.4.9
项目 package.json 中添加和和amis相关的依赖:
"@fortawesome/fontawesome-free": "^5.15.3", "@types/react": "18.0.24", "@types/react-dom": "18.0.8", "react": "18.2.0", "react-dom": "18.2.0", "sass": "^1.49.7", "monaco-editor":"0.30.1", "vite-plugin-monaco-editor": "1.1.0", "copy-to-clipboard": "3.3.1", "veaury": "2.3.12", "amis": "3.4.2", "amis-editor": "5.6.1"
vite.config.ts 中有正常初始化 monacoEditorPlugin 插件,并在 include 中添加了 monaco editor 依赖的引用,提前预加载
import type { UserConfig, ConfigEnv } from 'vite'; import pkg from './package.json'; import dayjs from 'dayjs'; import { loadEnv } from 'vite'; import { resolve } from 'path'; import { generateModifyVars } from './build/generate/generateModifyVars'; import { createProxy } from './build/vite/proxy'; import { wrapperEnv } from './build/utils'; import { createVitePlugins } from './build/vite/plugin'; import { OUTPUT_DIR } from './build/constant'; function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir); } const { dependencies, devDependencies, name, version } = pkg; const __APP_INFO__ = { pkg: { dependencies, devDependencies, name, version }, lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), }; export default ({ command, mode }: ConfigEnv): UserConfig => { const root = process.cwd(); const env = loadEnv(mode, root); // The boolean type read by loadEnv is a string. This function can be converted to boolean type const viteEnv = wrapperEnv(env); const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv; const isBuild = command === 'build'; return { base: VITE_PUBLIC_PATH, root, resolve: { alias: [ { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js', }, // /@/xxxx => src/xxxx { find: /\/@\//, replacement: pathResolve('src') + '/', }, // /#/xxxx => types/xxxx { find: /\/#\//, replacement: pathResolve('types') + '/', }, { find: /@\//, replacement: pathResolve('src') + '/', }, // /#/xxxx => types/xxxx { find: /#\//, replacement: pathResolve('types') + '/', }, ], }, server: { // Listening on all local IPs host: true, https: false, port: VITE_PORT, // Load proxy configuration from .env proxy: createProxy(VITE_PROXY), }, build: { minify: 'esbuild', target: 'es2015', cssTarget: 'chrome80', outDir: OUTPUT_DIR, rollupOptions: { output: { chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称 entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称 // manualChunks配置 (依赖包从大到小排列) manualChunks: { 'tinymce-vendor': ['tinymce'], 'echarts-vendor': ['echarts'], 'antd-vue-vendor': ['ant-design-vue','@ant-design/icons-vue','@ant-design/colors'], 'vxe-table-vendor': ['vxe-table','vxe-table-plugin-antd','xe-utils'], 'codemirror-vendor': ['codemirror'], //'emoji-mart-vue-fast': ['emoji-mart-vue-fast'], 'jeecg-online-vendor': ['@jeecg/online'], // 将 Lodash 库的代码单独打包 'lodash-es-vendor': ['lodash-es'], 'html2canvas-vendor': ['html2canvas'], // vue vue-router合并打包 vue: ['vue', 'vue-router'], 'cron-parser-vendor': ['cron-parser'], }, } }, // 关闭brotliSize显示可以稍微减少打包时间 reportCompressedSize: false, // 提高超大静态资源警告大小 chunkSizeWarningLimit: 2000, }, esbuild: { //清除全局的console.log和debug drop: isBuild ? ['console', 'debugger'] : [], }, define: { // setting vue-i18-next // Suppress warning __INTLIFY_PROD_DEVTOOLS__: false, __APP_INFO__: JSON.stringify(__APP_INFO__), }, css: { preprocessorOptions: { less: { modifyVars: generateModifyVars(), javascriptEnabled: true, }, }, }, // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed plugins: createVitePlugins(viteEnv, isBuild), // 预加载构建配置(首屏性能) optimizeDeps: { esbuildOptions: { target: 'es2020', }, exclude: [ //升级vite4后,需要排除online依赖 '@jeecg/online', ], // 提前预加载依赖,缩短首屏访问时间 include: [ '@vue/runtime-core', '@vue/shared', '@iconify/iconify', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US', '@ant-design/colors', '@ant-design/icons-vue', '@vueuse/core', '@vueuse/shared', '@zxcvbn-ts/core', 'ant-design-vue', 'axios', 'china-area-data', 'clipboard', 'codemirror', 'codemirror/addon/fold/brace-fold.js', 'codemirror/addon/fold/comment-fold.js', 'codemirror/addon/fold/foldcode.js', 'codemirror/addon/fold/foldgutter.js', 'codemirror/addon/fold/indent-fold.js', 'codemirror/addon/hint/anyword-hint.js', 'codemirror/addon/hint/show-hint.js', 'codemirror/addon/selection/active-line.js', 'codemirror/mode/clike/clike.js', 'codemirror/mode/css/css.js', 'codemirror/mode/javascript/javascript.js', 'codemirror/mode/markdown/markdown.js', 'codemirror/mode/python/python.js', 'codemirror/mode/r/r.js', 'codemirror/mode/shell/shell.js', 'codemirror/mode/sql/sql.js', 'codemirror/mode/swift/swift.js', 'codemirror/mode/vue/vue.js', 'codemirror/mode/xml/xml.js', 'cron-parser', 'cropperjs', 'crypto-js/aes', 'crypto-js/enc-base64', 'crypto-js/enc-utf8', 'crypto-js/md5', 'crypto-js/mode-ecb', 'crypto-js/pad-pkcs7', 'dom-align', 'echarts', 'echarts/charts', 'echarts/components', 'echarts/core', 'echarts/renderers', 'emoji-mart-vue-fast/src', 'intro.js', 'lodash-es', 'md5', 'nprogress', 'path-to-regexp', 'pinia', 'print-js', 'qrcode', 'qs', 'resize-observer-polyfill', 'showdown', 'sortablejs', 'tinymce/icons/default/icons', 'tinymce/plugins/advlist', 'tinymce/plugins/anchor', 'tinymce/plugins/autolink', 'tinymce/plugins/autosave', 'tinymce/plugins/code', 'tinymce/plugins/codesample', 'tinymce/plugins/contextmenu', 'tinymce/plugins/directionality', 'tinymce/plugins/fullscreen', 'tinymce/plugins/hr', 'tinymce/plugins/image', 'tinymce/plugins/insertdatetime', 'tinymce/plugins/link', 'tinymce/plugins/lists', 'tinymce/plugins/media', 'tinymce/plugins/nonbreaking', 'tinymce/plugins/noneditable', 'tinymce/plugins/pagebreak', 'tinymce/plugins/paste', 'tinymce/plugins/preview', 'tinymce/plugins/print', 'tinymce/plugins/save', 'tinymce/plugins/searchreplace', 'tinymce/plugins/spellchecker', 'tinymce/plugins/tabfocus', 'tinymce/plugins/table', 'tinymce/plugins/template', 'tinymce/plugins/textcolor', 'tinymce/plugins/textpattern', 'tinymce/plugins/visualblocks', 'tinymce/plugins/visualchars', 'tinymce/plugins/wordcount', 'tinymce/themes/silver', 'tinymce/tinymce', 'vditor', 'vue', 'vue-i18n', 'vue-print-nb-jeecg/src/printarea', 'vue-router', 'vue-types', 'vxe-table', 'vxe-table-plugin-antd', 'xe-utils', 'xss', 'monaco-editor/esm/vs/language/json/json.worker', 'monaco-editor/esm/vs/language/css/css.worker', 'monaco-editor/esm/vs/language/html/html.worker', 'monaco-editor/esm/vs/language/typescript/ts.worker', 'monaco-editor/esm/vs/editor/editor.worker', ], }, }; };
createVitePlugins 方法中调用了下面代码,初始化 monaco editor。
import monacoEditorPlugin from 'vite-plugin-monaco-editor'; export function configMonacoEditorPlugIn() { const plugin = monacoEditorPlugin({}); return plugin; }
粘贴有问题的完整 amis schema 代码:
amis schema
{ "type": "page", "title": "新页面", "regions": [ "body", "header" ], "body": [ { "type": "input-text", "id": "u:e2ae7064723c", "label": "文本", "name": "text" }, { "type": "crud", "syncLocation": false, "api": { "method": "get", "url": "" }, "columns": [ { "name": "id", "label": "ID", "type": "text", "id": "u:e6f59a01f1d8" }, { "name": "engine", "label": "渲染引擎", "type": "text", "id": "u:bdccf1994b10" } ], "bulkActions": [], "itemActions": [], "id": "u:1c8a69ea7601" } ], "id": "u:c2e6ea3ff5d5" }
操作步骤 请简单描述一下复现的操作步骤...
👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
要不来个问题仓库?光看这些信息没办法排查
应该和 amis 无关,可能是 vscode 或 nodejs 版本的问题,找其它办法解决看看。
描述问题:
进入 amis-editor 编辑器后,vscode控制台报错:无法读取 file://xxxxxx 在错误信息指示的路径:node_modules.pnpm\monaco-editor@0.30.1\node_modules\monaco-editor\esm\vs\base\browser\dompurify 存在 dompurify.js 这个文件,不清楚为什么会发生这个错误。
编辑器的【代码】窗口中,将一些属性标识成不支持的属性。这个问题在官网代码中没有发生,在自建的项目中会发生,不清楚哪里没有正确加载 monaco-editor。
请问在自建的 vite3 项目中使用 amis-editor,要添加哪些引用才能正确地初始化 monaco-editor 组件并使用 amis-editor编辑器,确保【代码】窗口中能不会将正确的属性识别为不支持。本人使用 amis 编辑器使用的引用如下:
截图或视频:
如何复现(请务必完整填写下面内容):
你是如何使用 amis 的? 在vite3 + vue 项目中,使用 veaury 组件加载 amis-editor 编辑器。
amis 版本是什么?请先在最新 beta 版本测试问题是否存在 amis: 3.4.2 amis-editor: 5.6.1 vite3: 4.4.9
项目 package.json 中添加和和amis相关的依赖:
vite.config.ts 中有正常初始化 monacoEditorPlugin 插件,并在 include 中添加了 monaco editor 依赖的引用,提前预加载
createVitePlugins 方法中调用了下面代码,初始化 monaco editor。
粘贴有问题的完整
amis schema
代码:操作步骤 请简单描述一下复现的操作步骤...