使用@stencil/vue-output-target需两次构建才生成vue-library？

我使用@stencil/vue-output-target 0.8.7搭配@stencil/core 4.12.2，执行npm run build时遇到异常：首次构建时CLI明确输出正在生成vue-library且无任何报错，但dist目录下完全找不到该文件夹；第二次执行相同构建命令后，dist/vue-library才会完整生成。

我的stencil.config.ts核心配置如下：

export const config: Config = {
  plugins: [
    sass({
      injectGlobalPaths: [
        '../../shared/assets/css/my-colors.css',
        '../../shared/assets/css/my-fonts.css',
      ]
    }),
  ],
  sourceMap: true,
  outputTargets: [
    vueOutputTarget({
      componentCorePackage: 'my-elements', // 与package.json的name字段一致
      proxiesFile: './dist/vue-library/lib/components.ts', // Vue组件包装器文件
    }),
  ],
};

排除了共享CSS路径问题（若路径错误理应每次构建都失败），更倾向是首次构建时某些缓存或依赖前置条件未满足，供二次构建使用。以下是可能的根源及解决方向：

可能的原因及解决办法 #

• 输出目标依赖顺序问题
  Stencil构建流程中，vue-output-target依赖核心组件的构建产物。如果核心组件的dist输出还未完全写入磁盘，vue-output-target就已开始执行，会导致文件缺失或目录未创建。
  解决：在outputTargets中先添加核心dist输出目标，确保核心产物先完成构建：

  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    vueOutputTarget({
      componentCorePackage: 'my-elements',
      proxiesFile: './dist/vue-library/lib/components.ts',
    }),
  ],
  

• 目录未自动递归创建
  首次构建时dist/vue-library/lib层级目录可能不存在，部分文件系统下Stencil不会自动创建所有嵌套目录，导致components.ts无法写入，进而整个vue-library目录未生成。
  解决：在构建脚本中提前创建目录，修改package.json的build命令：

  "scripts": {
    "build": "mkdir -p dist/vue-library/lib && stencil build"
  }
  

• 版本兼容性问题
  @stencil/vue-output-target 0.8.7与@stencil/core 4.12.2可能存在适配问题，新版本Stencil的构建钩子执行时机变化，导致vue-output-target逻辑未正确触发。
  解决：尝试升级@stencil/vue-output-target到最新兼容版本，或降级@stencil/core到匹配版本。

• 缓存机制干扰
  首次构建的缓存状态可能跳过了部分步骤，二次构建时缓存更新才触发完整的vue-library生成流程。
  解决：构建前清理缓存，修改build命令：

  "scripts": {
    "build": "stencil build --clean && stencil build"
  }
  

  或手动删除.stencil缓存目录后再执行构建。

内容的提问来源于stack exchange，提问作者Bob Ramsey