Cypress中使用字符串模板require文件无法找到该如何处理

这个问题是webpack静态模块分析限制和Cypress预编译逻辑共同导致的，你可以按下面的步骤排查解决：

• 第一步先确认动态变量的准确性
  先打印pageName的实际值，确认和静态引入的文件名完全匹配：大小写完全一致、没有多余的空格、换行符等特殊字符，Cypress打包时对路径大小写敏感，哪怕你用的是Windows系统也会严格校验。

  // 加这行打印，看输出是不是和你预期的文件名完全一致
  console.log('当前pageName值：', JSON.stringify(pageName))
  

• 第二步用require.context明确引入范围
  如果你需要保留动态引入的写法，可以给webpack明确指定要搜索的目录范围，避免webpack静态分析时漏掉对应的文件：

  // 第一个参数是要检索的目录路径，第二个参数false代表不遍历子目录，第三个参数是匹配文件的正则
  const getPageModule = require.context('../../cypress/model/page/web/app', false, /\.js$/)
  const page = getPageModule(`./${pageName}.js`)
  

• 第三步（可选）改用统一导出的写法
  如果你的页面模块不多，可以在../../cypress/model/page/web/app目录下新增一个index.js统一导出所有页面模块：

  // app目录下的index.js
  module.exports = {
    Homepage: require('./Homepage.js'),
    // 其他页面按这个格式添加即可
  }
  

  之后直接按变量取对应模块就行：

  const allPages = require('../../cypress/model/page/web/app/index.js')
  const page = allPages[pageName]
  

内容的提问来源于stack exchange，提问作者Anton George