运行vue-test-utils-karma-example时出现依赖解析错误与警告

针对你遇到的这两个问题，我整理了针对性的解决方案：

一、修复"无法解析'module'模块"的错误 #

这个错误本质是webpack在处理vue-server-renderer时，尝试解析Node.js核心模块module，但浏览器/测试环境下并不存在该模块。你可以通过修改项目webpack配置解决：

1. 找到项目中的测试webpack配置文件（通常是webpack.test.conf.js或类似命名的文件）
2. 在配置里添加对Node核心模块的处理：
   • 如果你使用webpack 4及以下版本，修改node选项：

     module.exports = {
       // ...其他配置
       node: {
         module: 'empty',
         // 同时可以补充其他可能触发报错的Node核心模块
         fs: 'empty',
         net: 'empty',
         tls: 'empty',
         child_process: 'empty'
       }
     }
     

   • 如果你使用webpack 5+版本，修改resolve.fallback选项：

     module.exports = {
       // ...其他配置
       resolve: {
         fallback: {
           module: false,
           // 其他模块同理设置为false即可
         }
       }
     }
     

3. 额外检查：确保vue和vue-server-renderer的版本严格一致——这两个包版本不匹配也会引发奇怪的解析错误。你可以在package.json里统一它们的版本号，然后重新执行npm install。

二、解决"关键依赖：依赖请求为表达式"的警告 #

这个警告是因为vue-server-renderer代码里用了动态require（比如require(变量)），webpack无法静态分析这类动态依赖，因此抛出警告。你可以用以下方式处理：

1. 最简单的方式是在webpack配置中过滤掉该类警告：

   module.exports = {
     // ...其他配置
     stats: {
       warningsFilter: [/Critical dependency: the request of a dependency is an expression/]
     }
   }
   

2. 或者通过noParse跳过对vue-server-renderer的解析，避免webpack扫描到动态依赖：

   module.exports = {
     // ...其他配置
     module: {
       noParse: /vue-server-renderer/
     }
   }
   

3. 进阶方案：如果测试环境并不需要vue-server-renderer，可以给它设置别名指向空模块：
   先新建一个empty-module.js文件，内容为：

   module.exports = {}
   

   然后在webpack配置里添加别名：

   const path = require('path')
   module.exports = {
     // ...其他配置
     resolve: {
       alias: {
         'vue-server-renderer': path.resolve(__dirname, './empty-module.js')
       }
     }
   }
   

完成以上配置修改后，重新执行npm run test，这两个问题应该就能解决了。

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