Vue 动态引入组件

发表于 更新于 本文字数： 430 阅读时长 ≈ 1 分钟

当基于 Vue 的单页应用采用 SSR 后，有些组件由于内部使用了 document 等浏览器端的变量，会在 import 时报错。比较好的解决方法是在 mounted 中动态的 import 组件，赋值到 data 中，在模板里通过 v-bind:is 来引入。

示例：

<template>
  <component v-bind:is="Comp"></component>
</template>

<script>
export default {
  data() {
    return {
      Comp: null
    }
  },
  mounted() {
    import('comp').then(Comp => {
      this.Comp = Comp;
    });
  }
}
</script>