当你在开发一个 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当遵循 编写通用代码 (opens new window)的要求。简而言之，请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API。

      // docs/.vuepress/enhanceApp.js

export default ({
    Vue,
    options,
    router,
    siteData,
}) => {
// FIXME:解决加载 import 'v-dialogs' 报错的问题
    Vue.mixin({
        mounted() {
           let dialog = require('v-dialogs')
           Vue.use(dialog)
        },
    });
}

如果你的模块通过 export default 导出一个 Vue 组件，那么你可以动态注册它：

      <template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('v-dialogs').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://xiaoying.org.cn/pages/fa7166/

最后更新于 2026-02-17 19:41 history