远程vue文件加载器 — vue3-sfc-loader

  为了实现浏览器端运行时解析.vue文件并动态插入组件，终于找到了一个神器vue3-sfc-loader——可以实现完整的.vue文件解析构建，而不只是template。

image.png

  不要被0.x的版本号和3位数的周下载误导了，这个库已经被使用在了大名鼎鼎的monaco-editor(也就是VSCode)中。
  使用说明和Demo都可以在官网中找到，本文不再赘述。但就像大部分0.x版本的库样，使用细节会出现很多问题，这才是本文的主题。

细节

• 虽然名字叫vue3-sfc-loader，但实际上也可以加载vue2，或者非vue文件。但是，使用vue2时一定要用

import { loadModule } from 'vue3-sfc-loader/dist/vue2-sfc-loader.js'

而不是

import { loadModule } from 'vue3-sfc-loader'

虽然API一模样，而且解析template时也没区别。但当你涉及到script解析时就会出现不可预知的错误。

• 唯一的API —— loadModule(path,options)，如果要解析vue文件，那么path的路径后缀一定要以.vue结尾
• 对于import的对象，需要通过options中的moduleCache对象进行注入，当然这种注入是静态的
• 如何动态注入，导入自定义文件？ 答：目前不行

附录

• https://github.com/FranckFreiburger/vue3-sfc-loader
• https://www.npmjs.com/package/vue3-sfc-loader