imguolao / monaco-vue

Use monaco-editor loaded from CDN in Vue 2&3, no need to bundling.
https://imguolao.github.io/monaco-vue/
MIT License
234 stars 21 forks source link

`build.rollupOptions.output` in `vite.config.ts` is not working #29

Closed zhzwz closed 1 year ago

zhzwz commented 1 year ago

After vite build, I found files with filename similar to editor.worker-[hash].js in the /dist/assets/ directory.

The config prop build.rollupOptions.output in vite.config.ts is not working. How to config the output directory for this component's worker files?


在 Vite 中按需使用组件时,我使用了文档提供的 loader.config({ monaco }) 方式引入。在执行编译后,我在 /dist/assets/ 目录中找到了文件名类似 editor.worker-[hash].js 的文件。

根据实际项目的需要,我事先在 Vite 的配置文件中修改了 build.rollupOptions.output 属性,自定义配置了编译生成文件的目录(比如把编译生成的资源文件目录从 /dist/assets/ 修改为 /dist/a/b/c/)。但是这个组件的 editor.worker-[hash].js 等文件,似乎并没有遵循 Vite 的相关配置,而是固定为 /dist/assets/ 的路径。

由于特殊的生产环境需求,目前我只能改用 CDN 方案来解决这个问题:在 public 静态文件目录中创建一个 monaco-editor@0.38.0 的目录用于存放 monaco-editor@0.38.0/min/vs 的内容,然后使用 CDN 方式引入。

{ vs: `${BASE_URL}monaco-editor@0.38.0` }

这种方式应该是注册了全局组件,不优雅。不知是否能提供遵循 Vite 配置的方案?

imguolao commented 1 year ago

This is vite's problem, not here is.

Maybe you can find the solution here vite/discussions/1791.

Or try to use plugin from community, such as rollup-plugin-monaco-editor, vite-plugin-monaco-editor.

zhzwz commented 1 year ago

Thanks for your response.