Vue3中Cypress测试时无法找到Pug模块，求解决方案

我之前在Vue3项目里用Pug写模板，项目运行完全正常，但跑Cypress组件测试时也碰到过一模一样的“Cannot find module 'pug'”错误，折腾了好一阵才搞定，给你几个实用的解决方向：

1. 确认Pug相关依赖已正确安装 #

虽然Vue项目能正常运行，但Cypress的测试环境依赖解析逻辑和项目本身可能不一样，一定要确保pug和对应的loader是安装在项目本地的dev依赖，而不是全局安装或者依赖其他间接引入。执行下面的命令重新安装：

# npm
npm install pug pug-plain-loader --save-dev

# yarn
yarn add pug pug-plain-loader -D

如果你的项目用的是Vite而不是Webpack，还需要确保@vitejs/plugin-vue已经正确配置（它默认支持Pug，但需要你本地有pug依赖），或者额外安装vite-plugin-pug并在Vite配置里启用。

2. 给Cypress单独配置Pug解析规则 #

Cypress组件测试的构建配置（Webpack/Vite）是独立于项目本身的，有时候需要手动指定Pug的处理规则：

如果你用Webpack作为 bundler #

在cypress.config.js里扩展Webpack配置，添加Pug的loader规则：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'webpack',
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.pug$/,
              loader: 'pug-plain-loader',
              exclude: /node_modules/
            }
          ]
        }
      }
    }
  }
})

如果你用Vite作为 bundler #

确保你的Vite配置（比如vite.config.js）已经包含Pug支持，并且Cypress能正确读取到这个配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pugPlugin from 'vite-plugin-pug'

export default defineConfig({
  plugins: [
    vue({
      template: {
        preprocessOptions: {
          pug: {} // 可以在这里添加Pug的配置选项
        }
      }
    }),
    pugPlugin()
  ]
})

然后在cypress.config.js里指定使用项目的Vite配置：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
      viteConfig: './vite.config.js'
    }
  }
})

3. 清除Cypress缓存并重启测试环境 #

Cypress有时候会缓存旧的依赖解析结果，导致明明装了依赖却找不到。可以：

• 关闭Cypress测试窗口
• 删除node_modules/.cache/cypress目录
• 重新执行npx cypress open --component启动测试

如果还是不行，试试彻底清理依赖后重装：

rm -rf node_modules package-lock.json # 或者 yarn.lock
npm install # 或者 yarn install

4. 检查component.js的配置干扰 #

看看你的/cypress/support/component.js里有没有引入一些会修改Webpack/Vite配置的插件或者代码，比如全局样式注入、自定义loader等，这些可能会覆盖默认的Pug解析规则。如果有，可以暂时注释掉这些配置，测试是否能正常运行，再逐步排查。

内容的提问来源于stack exchange，提问作者jean d'arme