生产插件组件

方法

vue3-sfc-load库,生产环境缺少parent属性,需查看源码修改或等库更新
打包成 es 模块,动态组件使用 http 获取,开发环境报路径问题,需在研究
打包成 umd 模块

umd 实现

正常编写组件,但需要注意
- 如果不想将依赖打包进模块里,需使用外部加载方式将其剥离.
- 自动加载的模块也看需要是否玻璃
创建模块打包入口,es 导入导出就行

import RemoteComp from "./RemoteComp.vue";
import RemoteComp2 from "./RemoteComp2.vue";

export { RemoteComp, RemoteComp2 };

设置打包规则

build: {
      rollupOptions: {
        external: ['vue', "element-plus"],
        output: {
          globals: {
            vue: 'Vue',
            'element-plus': 'ElementPlus',
          }
        }
      },
      cssCodeSplit: true,
      outDir: 'RemoteComponent',
      lib: {
        formats: ['umd'],
        entry: path.resolve(__dirname, 'src/REMOTE/index.js'),
        name: 'RemoteComponent',
        fileName: (format) => `index.v1.${format}.js`
      },
    },

将打包后的文件放入远端服务器
获取文件,然后执行 Function,获取模块

const remoteModuleUrl = "https://file.jstar.site/index.v1.umd.js";

async function loadRemoteModule() {
  const res = await axios.get(remoteModuleUrl);
  new Function(res.data)();
  window["RemoteComponent"]; // 所有模块, 可以直接使用或者赋值给component
}

loadRemoteModule();

生产插件组件 ​

方法 ​

umd 实现 ​

生产插件组件

方法

umd 实现