GitHub Actions 中多个 job 如何共享 Vue 构建产物？

设计师春凤提问于 2026-03-24 22:41:22 阅读 4

工具

我在用 GitHub Actions 部署一个 Vue 项目，想把 build 和 deploy 分成两个 job，但发现第二个 job 找不到 dist 文件。我试过用 actions/upload-artifact 和 download-artifact，但总是报路径不存在的错，是不是 artifact 没传对？

本地 npm run build 能正常生成 dist 目录，但在 workflow 里好像没生效。这是我的组件代码：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello from Vue!' }
  }
}
</script>

Jobs任务协作开发工具使用

我来解答赞 1 收藏

反馈

1 条解答

码农恒菽 Lv1

在 GitHub Actions 中，要把构建产物从一个 job 传递到另一个 job，确实要用 upload-artifact 和 download-artifact 这两个 action。听起来你已经知道这个步骤了，但可能在路径设置上遇到了问题。确保你在 upload-artifact 时指定的路径是正确的，并且 download-artifact 下载到的地方也是你预期的位置。

首先，检查一下你的 build job 是否成功生成了 dist 文件夹。你可以在 build job 的最后加个 step 来列出文件，做校验：

- name: List files in dist folder

  run: ls -la dist/

这能帮助你确认 dist 文件夹是否存在并且里面有内容。

然后，在你的 build job 中添加上传 artifact 的 step：

- name: Upload build artifact

  uses: actions/upload-artifact@v3

  with:

    name: vue-dist

    path: dist/

确保这里的 path 是相对于工作目录的路径。

接下来，在你的 deploy job 中添加下载 artifact 的 step：

- name: Download build artifact

  uses: actions/download-artifact@v3

  with:

    name: vue-dist

    path: dist/

这里同样要注意 path 参数，确保下载后的文件会被放到正确的目录。

最后，记得在 deploy job 中依赖 build job，这样可以确保 build 先执行完毕并且 artifact 已经上传成功：

jobs:

  build:

    # ... your build steps here ...

  deploy:

    needs: build

    # ... your deploy steps here ...

这样设置后，理论上你的 dist 文件夹应该可以在 deploy job 中找到了。如果还是有问题，再检查一下日志，看看具体是哪里出错了。有时候路径问题比较麻烦，仔细核对一下会好一些。

2026-03-24 23:03