vueリモートコール実戦のロードと実行

現在のvueアプリケーションの多くはwebpackと一緒に使用されていますが、パブリケーションのたびに再パッケージが必要で、データベース構成で直接ページを生成することはできません.
共通のリモートコールモジュール
1、seajs 2、ocLazyLoad 3、vue非同期コンポーネントは、vueでリモートコールモジュールを実行するため、vue非同期コンポーネントのモードについて詳しく説明します.
vue非同期コンポーネント

vue-routerモジュールの依存

を追加

router構成では、取得ユーザが所有するメニューを追加し、メニューリストを非同期コンポーネントに変換し、ルーティングに動的に追加する

.

router.beforeEach((to, from, next) => {
  if (false) {
  } else {
    if (!store.getters.hasAddRoude) {
      store.dispatch('GetUserPowerInfo').then(powerData => {
       //    
       //  
       var addRouters = [];
       for(let [index, element] of powerData.entries()) {
         var item = {
           path: element.path, component: function(resolve, reject) {
            getDisplayView(element.component).then(res => {
              resolve(splitCode(res))
            })
           }
         }
         addRouters.push(item);
       }
       router.addRoutes(addRouters) //           
       next({...to, replace: true })
      })
    }else {
      next() // token     
    }
  }
})

vuexのuserモジュールのaction

//         
GetUserPowerInfo({ commit, state }) {
    commit('setHadAddRouder', true);
    return new Promise((resolve, reject) => {
        getMenuConfig().then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
},

menu config

[
  { 
    "title": "  ", "name": "aaa", "path": "/aaa", "component": "display.vue"
  }
]

display.vue

  export default {
    props: {
      code: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        html: '',
        js: '',
        css: ''
      }
    },
  }

コードスプリッタのツールクラスsplitCode

export const getSource = (source, type) => {
  const regex = new RegExp(`]*>`);
  let openingTag = source.match(regex);

  if (!openingTag) return '';
  else openingTag = openingTag[0];

  return source.slice(source.indexOf(openingTag) + openingTag.length, source.lastIndexOf(`${type}>`));
}

export const splitCode = (codeStr) => {
  const script = getSource(codeStr, 'script').replace(/export default/, 'return ');
  const css = getSource(codeStr, 'style');
  const template = getSource(codeStr, 'template');

  if(css) {
    const style = document.createElement('style');
    style.type = 'text/css';
    // style.id = this.id;
    style.innerHTML = css;
    document.getElementsByTagName('head')[0].appendChild(style);
  }
  return {
    ...new Function(script)(), template
  }
}

簡単なリモートコールモジュールで完了