Vue3+Vite项目使用Cypress组件测试提示需安装@vitejs/plugin-vue报错如何解决

问题根因 #

报错核心是Cypress启动测试用的Vite实例没有加载@vitejs/plugin-vue插件，具体原因有两点：

• 你使用的@cypress/vite-dev-server@2.2.0是较旧版本，对Vite配置文件的加载逻辑存在缺陷，即使你指定了configFile路径，也无法正确读取ESModule格式的vite.config.js中的plugins配置。
• Cypress 9.x的插件运行环境默认是CommonJS，你项目中的vite.config.js用的是ESModule导出语法（export default），配置文件加载直接失败，相当于Vite完全用默认配置启动，没有注册Vue解析插件。

修复方案 #

方案1（最稳妥，优先选择）：直接在Cypress插件配置中手动传入vue插件 #

修改./cypress/plugins/index.js文件，手动引入并注入@vitejs/plugin-vue，绕过配置文件加载问题：

const path = require("path");
const { startDevServer } = require("@cypress/vite-dev-server");
// 引入vue插件
const vue = require("@vitejs/plugin-vue");

module.exports = (on, config) => {
  on("dev-server:start", (options) => {
    return startDevServer({
      options,
      viteConfig: {
        // 手动指定plugins，绕过配置文件加载问题
        plugins: [vue()],
        // 如果还有其他vite配置比如别名、全局样式也可以在这里添加
        resolve: {
          alias: {
            '@': path.resolve(__dirname, '../../src')
          }
        }
      },
    });
  });
};

方案2：修改vite.config.js为CommonJS格式 #

如果你想继续复用项目原有的Vite配置，把vite.config.js改成CommonJS导出即可：

const { defineConfig } = require("vite");
const vue = require("@vitejs/plugin-vue");

module.exports = defineConfig({
  plugins: [vue()],
});

额外注意 #

你提供的NavigationBtn.vue组件存在递归引用问题：组件内部又引入了自身作为子组件，修复完Vite插件问题后会触发递归渲染报错，需要调整这个组件的逻辑，避免自引用。

内容的提问来源于stack exchange，提问作者Souriya Phongsavanh