前言

我发现了 Vite 的一个Bug，官方写的可以在 vite.config.ts 里面使用异步函数

然后我像官方例子那样写了之后，打包没有任何反应

起因

起因是这样的，我不是开源了一个用 Vue 仿抖音 的项目嘛，这几天冲到 Github Trending 榜一了

两天时间涨了 4 千 star，然后有网友给我提了 issue ，问我能否提供一个 docker 版本

我只是一个前端界的小学生啊，让我搞 docker 啥的太高看我了，于是我回复到：我不会 docker，后面有空了学习下，如果你会弄的话，可以提 pr

没有半点敷衍的意思，我是真的不会，你让我用 Vue 做个管理后台没问题，docker 这个真就涉及到俺的知识盲区了

后续

平淡无奇的度过一天之后，又有位老哥给我提了一个 issue ，我打开一看直接汗流浃背了

人家直接提了 pr ，还给我写了教程告诉我怎么怎么弄，但是他没写合了 pr 之后的后续操作，以我浅薄的见识知道 docker 镜像有个地址，要把这个地址发出来，别人才能拉下来用

这下好了，不上也得上了，硬着头皮学习下 docker 吧

过程

安装 docker

我先把 pr 合到了 dev 分支，准备先在我本地构建一个 docker 镜像先，能构建成功的话，再推送到 github 上，再用 Github Action 构建。都没问题我再合到 master 分支

之前也没用过 docker ，网上搜索到一篇 让前端10分钟就能入门Docker！ 的文章😅

看了之后，立马打开 www.docker.com/下载 docker

下载完成！安装完成！

本地打包镜像

docker 启动！

映入眼帘的一片空白，中间显示一串 Docker Desktop stopped..，我也没管，以为正常就这样呢

然后立马搜索 docker 打包命令，打个包先！

docker build . -t douyin-vue

不出意外的报错了，一翻谷歌之后才知道 docker 要以管理员权限启动后

以管理员权限启动后，打包正常了，打包完成之后在 docker desktop 软件里面看到了刚刚打包的镜像，启动试了一下，可以正常访问

推送到 Github

本地打包没问题，我就准备推送到 Github ，让 Github Action 自动跑一下，看有没有问题

等了一小会儿，失败了

怎么会呢！！！我点开一看告诉我 src/dist 这个目录找不到

一开始我以为这个报错是因为 .dockerignore 文件里面把 dist 目录忽略了，导致找不到 dist 目录，然后我把 .dockerignore 里的 dist 目录删除了，结果还是报这个错

然后我又在网上搜，看别人的文章是怎么构建 docker 镜像的，我发现我的步骤也没有问题啊，只不过是别人用的 npm 或者 yarn 而已，难道是因为我用 pnpm 才不行？

我立马复制别人的代码到 Dockerfile 文件里面，先在本地 build 了一个镜像，没有问题，美滋滋，直接推送！

在焦急的等待中，我就像妻子临产时，徘徊在手术室外的丈夫一样彷徨

突然一声叮咚响起，Github发送到我邮箱的构建失败邮件，不出意外的到达，再一次构建失败了，蚌埠住了啊😫😫😫

后面各种尝试，我毕竟不是专业的搞这个的，只能网上各种搜索是什么问题导致的

看到别人的文章里面写的操作，和我的一模一样啊，为啥我的本地可以，Github Action 不行啊

创建空项目测试

实在没办法了，我想不出哪里有导致了错误

于是我新创建了一个 Vite 的空项目，复制 Dockerfile 文件

本地打包，成功！

Github Action ，成功！

我直接？？？？？？？？？？？？

于是我把原来那个项目，把入口文件(main.ts)全注释掉，就像一样空白项目一样

再次推送到 Github 上，Github Action 再次构建，再次失败了...

这一刻，张某我也恍惚了，看着总共 30 多次的构建失败记录，我陷入了深深的沉默之中...

发现问题

后面我仔细看了看，打包成功和打包失败的区别，没想到竟然是 npm run build 这里出了问题

如图所示，报错的那个项目，在 Github Action 里面执行 npm run build 命令后，既没报错，但也没输出。而正常的项目，运行 npm run build 命令后会输出打包后的文件列表

打包不成功也没报错这点也太坑人了，导致我一直没有注意到是这里的原因，都没打包成功，当然找不到 dist 目录了

但是！！！ 但是，在我本地是可以正常打包的！！！ 这就有点离谱了

我想了又想，我两个项目内容已经相同，都是空白项目了，一个打包成功，一个打包不成功，难道是 Vite 的配置文件有问题吗？

我把默认配置复制到我的项目里面，结果 Github Action 竟然构建成功了

import {defineConfig} from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [Vue()]
})

问题果然出在 vite.config.ts

于是乎，我一行一行的去掉，不断的尝试，发现这种写法在本地打包正常，但是在 Github Action 里面就会打包失败，而且还不报错

import {defineConfig} from 'vite'
import Vue from '@vitejs/plugin-vue'
import {getLastCommit} from 'git-last-commit'

export default defineConfig(async () => {
  const latestCommitHash = await new Promise<string>((resolve) => {
    return getLastCommit((err, commit) => (err ? 'unknown' : resolve(commit.shortHash)))
  })
  return {
    plugins: [
      Vue()
    ],
    define: {
      LATEST_COMMIT_HASH: JSON.stringify(
        latestCommitHash + (process.env.NODE_ENV === 'production' ? '' : ' (dev)')
      )
    },
  }
})

而这种写法就本地和 Github Action 里面都没有问题

import {defineConfig} from 'vite'
import Vue from '@vitejs/plugin-vue'
import {getLastCommit} from 'git-last-commit'

export default defineConfig(() => {
  return new Promise(resolve => {
    let latestCommitHash = ''
    getLastCommit((err, commit) => {
      if (!err) latestCommitHash = commit.shortHash
      resolve({
        plugins: [
          Vue()
        ],
        define: {
          LATEST_COMMIT_HASH: JSON.stringify(
            latestCommitHash + (process.env.NODE_ENV === 'production' ? '' : ' (dev)')
          )
        },
      })
    })
  })
})

这里我创建的用于测试的空项目地址：github.com/zyronon/doc… 大家有兴趣可以试试 Github Action 能不能打包成功

最后

处理这个问题花了下午和整个晚上，欸。

已经在 Github 上给 Vite 提了一个 Bug 了