vue 组件渲染出错

[eleven-net-cn]

试用以后发现，普通的 vue 组件可以正常渲染，但是，从开发中的包中 import 代码后，渲染会出错。

怀疑 Demo 组件渲染时，路径解析是不是有一些问题？

详细代码如下方

代码

@zhangqc/plugin-dumi-vue 版本

{
  "@zhangqc/plugin-dumi-vue": "^1.0.5",
}

Demo vue 组件

Basic.vue

/**
 * title: 基本用法
 * desc:
 * defaultShowCode: true
 */

<template>
  <div>基本用法</div>
</template>

<script>
  // 推测这里 import 的导入，路径可能处理有问题？
  // @xx/utils 是本地正在开发的包，testFunc 是正在编写的函数。准备本地运行 demo，来测试 testFunc 函数
  import { testFunc } from '@xx/utils';

  export default {
    components: {},
    data() {
      return {}
    },
    created() {
      testFunc()
    }
  };
</script>

MarkDown 中引用

<code src="./demos/Basic.vue" />

.umirc.ts

import { defineConfig } from 'dumi';

export default defineConfig({
  ...
  resolve: {
    previewLangs: ['jsx', 'tsx', 'html'],
  },
  plugins: ['@zhangqc/plugin-dumi-vue'],
  ...
});

渲染报错

[kkaaddff]

这是一个早期的原型，dumi 编译过程中对于第三方依赖没有进行处理，你可能需要将 第三方依赖 External 到windows上，可以参照 clone 一下 仓库参照一下example中的处理

[eleven-net-cn]

这是一个早期的原型，dumi 编译过程中对于第三方依赖没有进行处理，你可能需要将 第三方依赖 External 到windows上，可以参照 clone 一下 仓库参照一下example中的处理

@xx/utils 不是第三方包，而是本地正在开发的包。按照 dumi 的推荐，demo 组件中直接书写开发中的包名，方便阅读展示，对于 React Demo 组件，dumi 内部会自动做解析处理。现在 Vue 组件看上去是缺少这种处理，而找不到导致渲染出错了。

[kkaaddff]

这是一个早期的原型，dumi 编译过程中对于第三方依赖没有进行处理，你可能需要将 第三方依赖 External 到windows上，可以参照 clone 一下 仓库参照一下example中的处理

@xx/utils 不是第三方包，而是本地正在开发的包。按照 dumi 的推荐，demo 组件中直接书写开发中的包名，方便阅读展示，对于 React Demo 组件，dumi 内部会自动做解析处理。现在 Vue 组件看上去是缺少这种处理，而找不到导致渲染出错了。

内部的包需要自己设置一下 alias可以看一下源码中的 buildvue文件，做成相应的修改

[eleven-net-cn]

推荐在项目的 README 文档给一个使用或接入的示例，这是 plugin 使用很重要的一个环节。

如果能在 plugin 自己内部消化掉这个问题，会是最佳的。

[eleven-net-cn]

alias: {
  '@xxx/utils': path.join(process.cwd(), 'packages/xxxxxx'),
  // '@xxx/utils': path.join(process.cwd(), 'packages/xxxxxx/dist'),
  // '@xxx/utils': path.join(process.cwd(), 'packages/xxxxxx/src'),
},

在 .umirc.ts 中尝试添加 alias，做了各种尝试，都无法正常渲染，报相同的错。

[eleven-net-cn]

kanshagnqu

这是一个早期的原型，dumi 编译过程中对于第三方依赖没有进行处理，你可能需要将 第三方依赖 External 到windows上，可以参照 clone 一下 仓库参照一下example中的处理

看上去默认处理了包的 alias 问题，但是没有对 monorepo 仓库做区分处理，这样么

[kkaaddff]

看上去的是这样的