Vue项目在CI/CD中构建失败怎么办？

皇甫兰兰提问于 2026-02-27 13:24:23 阅读 13

前端

我在本地跑得好好的Vue项目，一推到GitHub Actions就报错说找不到组件，真的搞不懂为啥。

我用的是 Vue 3 + Vite，本地开发和 build 都没问题，但 CI 环境里总是提示 Failed to resolve component: MyButton。明明路径也没写错啊……

这是我的一个组件引用写法：

<template>
  <div>
    <MyButton @click="handleClick">提交</MyButton>
  </div>
</template>

<script setup>
import MyButton from '@/components/MyButton.vue'
</script>

是不是 CI 环境大小写敏感？还是路径别名没生效？我已经快被这个问题卡一天了……

我来解答赞 2 收藏

反馈

2 条解答

Air-秋花 Lv1

这个问题我遇到过好几次，基本可以确定是大小写敏感的问题。

CI环境（GitHub Actions默认运行在Linux上）是严格区分大小写的，而本地如果是macOS或Windows，文件系统默认不区分大小写。所以你本地跑得好好的，推上去就炸了。

核心原因就是：你引用的文件名和实际文件名大小写不一致。

举个例子，你的实际文件可能是 myButton.vue（小写m），但你在代码里写的是 MyButton.vue（大写M）。本地环境不care这个区别，Linux环境直接告诉你找不到文件。

排查方法很简单。去你的项目目录，执行 ls -la src/components/，看一眼文件的真实名称。或者直接在GitHub仓库页面上看，文件名是什么就是什么，没有模糊匹配。

确认文件名后，修正你的import语句：

import MyButton from '@/components/myButton.vue'  // 假设实际文件名是小写m

顺便说一句，按照Vue官方的风格指南，组件文件的推荐命名方式是 PascalCase，即 MyButton.vue。如果你的文件名不规范，建议直接改文件名，而不是改引用，这样更符合标准写法。

改完之后记得检查项目中所有引用这个组件的地方，全局搜索一下比较稳。

另外提一句，路径别名 @ 在Vite里需要在 vite.config.js 里配置：

import { defineConfig } from 'vite'

import path from 'path'



export default defineConfig({

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './src')

    }

  }

})

不过既然你本地build没问题，别名配置应该是对的，问题还是出在大小写上。

这种坑踩过一次就记住了，以后养成习惯，文件命名和引用保持一致，最好用PascalCase，省得折腾。

2026-03-02 09:10

技术小汐 Lv1

前端这块经常遇到本地跑得好好的，CI一跑就崩的情况，基本就是环境差异导致的，你这个报错 Failed to resolve component: MyButton 九成九是路径别名没生效的问题。

Vue 3 + Vite 项目里，@ 通常指向 src 目录，但 CI 环境默认不会自动识别这个别名，除非你显式配置了 vite.config.js 里的 resolve.alias。本地开发可能因为 IDE 或开发服务器帮你做了映射，但 CI 构建是纯 Vite 行为，没配就真找不到。

检查下你的 vite.config.js 里有没有这一段：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from 'path'



export default defineConfig({

  plugins: [vue()],

  resolve: {

    alias: {

      '@': path.resolve(__dirname, 'src')

    }

  }

})

如果没配，加进去。如果已经配了，再确认下 CI 的工作流里有没有装依赖时漏了什么关键包，比如 vite 本身、@vitejs/plugin-vue 这些。有时候 package-lock.json 和 npm install 在 CI 上行为不一致，尤其是用了 pnpm 或 yarn 的时候。

另外，文件名大小写也要核对下，虽然你本地是 macOS 或 Windows（不区分大小写），但 GitHub Actions 的 runner 默认是 Linux，文件名大小写错了就真找不到。比如你写的是 MyButton.vue，实际文件叫 mybutton.vue 或 Mybutton.vue，CI 就会挂。

最后说个坑：CI 里如果用了 actions/checkout@v3，记得加上 fetch-depth: 0，否则有时候子模块或者某些分支引用的文件没拉全，也会导致组件缺失。不过这个概率低点，先从 alias 和文件名大小写查起吧。

2026-02-27 14:00