Question

我从webpack模板（vue-wepack-template）开始构建Vue应用程序。在通过命令执行单元测试期间：

yarn run unit

我可以看到一些Vue警告：

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/xxxxxxx/components/node_modules/vue-loader/index.js??ref--1!/Users/xxxxxxxx/components/node_modules/eslint-loader/index.js??ref--0!/Users/xxxxxxxx/components/src/components/Layout/FullScreen.vue
    Used by 2 module(s), i. e.

ERROR LOG: '[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ERROR LOG: '[Vue warn]: Error in mounted hook: "ReferenceError: Can't find variable: d3"

它们看起来像某种Webpack配置问题，但我不知道从哪里开始调试它。我还没有触及默认的测试配置，测试运行正常......

我错过了什么？

Answer 1

这看起来像是多个问题。

<强> 1。未知的自定义元素：

您没有在Vue实例上安装vue-router。 vue-router添加了一个全局组件 - 路由器链接 - 您正在渲染的其中一个组件正在寻找。

<强>解决方案

您可以在测试前安装vue-router：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // install vue-router

或者将模拟路由器链接组件注册到您的vue实例

Vue.component('router-link', { // registers router-link component
  template: `<div />`
})

在运行测试之前

<强> 2。有多个模块的名称只有外壳不同。

当您意外地将模块导入大写时，通常会抛出此错误：

// some-file.js
import vue from 'vue'
// another-file.js
import vue from 'Vue' // Cause of error - multiple modules with names that only differ in casing

<强>解决方案

确保使用小写字母标识导入中的模块：

// some-file.js
import vue from 'vue'
// another-file.js
import vue from 'Vue'

在您的情况下，导入Layout/FullScreen.vue

时出现错误

第3。挂钩错误：＆＃34; ReferenceError：无法找到变量：d3＆＃34;

这看起来像是某个Vue模块中的错误。

您正在引用d3，但尚未导入。

<强>溶液

确保导入d3。

注意：我可能错了，这可能是webpack的一个问题。尝试使用这些解决方案进行调试，如果无法修复错误，请在vue-webpack-template中打开一个问题。

测试执行期间的Vue警告

1 个答案: