iframe实现vue嵌套外部系统

实现目标:

  1. 外部系统相关配置放在配置文件中
  2. 外部系统渲染入口放在主系统中,由主系统router控制外部系统的加载
  3. 外部系统加载过程展示loading

相关代码:

// config.js
export default {
    collect: {
        staticAddress: 'http://127.0.0.1:9303'
 },
 application: {
        staticAddress: 'http://127.0.0.1:9304'
 }
};
// router.js
import config from './config.js';
import DynamicComponent from './DynamicComponent.vue';
{
     path: `${baseUrl}/collect`,
     name: 'collect',
     props:config.collect,
     component: DynamicComponent
},
// DynamicComponent.vue