现象描述:

vue的项目,在运行 npm run server时没有问题,但是运行npm run test:unit时却报错,但是在其他项目中又能正常运行,所以感觉有点无法定位问题的发生位置,因为没有提示缺少包什么的。

报错信息

 RUNTIME EXCEPTION  Exception occurred while loading your tests

TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (D:\WK\project-name\dist\assets\js\webpack:\webpack\bootstrap:19:1)
    at D:\WK\project-name\dist\assets\js\webpack:\webpack\bootstrap:83:1
    at Object.<anonymous> (D:\WK\project-name\dist\assets\js\main.js:87:10)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.module_1.default._extensions.<computed> [as .js] (D:\WK\project-name\node_modules\mochapa
ck\src\util\registerRequireHook.ts:106:12)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)

解决方案

这个问题是通过首先在其他正常项目里运行了一下测试文件,正常,因为测试文件没什么内容,是一个非常简单的通用测试用例,所以可以在其他项目中运行,发现测试正常通过,项目也能正常运行,所以不是缺包,通过项目对比,最终发现问题出现在vue.config.js文件中

  chainWebpack(config) {
    //if (process.env.NODE_ENV == "production") {
    config.optimization.splitChunks({
      minSize: 30000, //依赖包超过300000bit将被单独打包
      minChunks: 1, // 模块的最小被引用次数
      // maxAsyncRequests: 5, // 按需加载的最大并行请求数
      // maxInitialRequests: 3, // 一个入口最大并行请求数
      // automaticNameDelimiter: '~', // 文件名的连接符
      name: true,
      cacheGroups: {
        common: {
          name: 'chunk-common', // 打包后的文件名
          chunks: 'initial', //可选值有:'all'(所有代码块),'async'(按需加载的代码块),'initial'(初始化代码块)
          maxInitialRequests: 5,
          priority: 1,//缓存组打包的先后优先级,数值大的优先
          reuseExistingChunk: true//如果当前代码块包含的模块已经有了,就不在产生一个新的代码块
        },
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          priority: 2,
          reuseExistingChunk: true,
          enforce: true
        },
        antDesignVue: {
          name: 'chunk-ant-design-vue',
          test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
          chunks: 'initial',
          priority: 3,
          reuseExistingChunk: true,
          enforce: true
        },
        moment: {
          name: 'moment',
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          chunks: 'initial',
          priority: 4,
          reuseExistingChunk: true,
          enforce: true
        },
        coreJs: {
          name: 'chunk-core-js',
          test: /[\\/]node_modules[\\/]core-js[\\/]/,
          chunks: 'initial',
          priority: 5,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    })
    //}
  }

以上代码是用来配置打包文件的,它主要是用于npm run build时候,但是这次设置的时候忘记设置使用条件了,导致执行测试命令的时候,也执行了该段代码,导致报错,把代码中的

if (process.env.NODE_ENV == "production") {

的注释去掉就可以了

chainWebpack中的配置主要用于打包,所以其他命令时不需要执行,使其在其他命令执行时被忽略就没问题了

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐