考虑下面的组件模板…

<template>
  <Unknown></Unknown>
</template>

...其中,Unknown可以是全球注册的组件,也可以是not.在运行时,我会遇到以下信息错误:

[Vue warn]:未知自定义元素:-您注册了

[...]

然而,对于我的用例,我想强制要求在构建时不会发生类似的情况.目前,vue-cli-service build在这个场景中执行了一个成功的构建,然后在运行时显示错误(此时没有用).

我很好奇,是否有一种方法可以内省地捕获这个潜在的问题,并迫使构建失败.我希望能发现一个不允许出现这种情况的--strict号标志(或类似标志).

我甚至try 了template-compilercomponent-compiler,看看我是否能在手动判断中捕捉到它,令人震惊的是,没有报告任何错误.

有什么 idea 吗?


下面是我提到的使用更低级别component-compiler-utils的更详细的实验.这应该是便携式的,以观察相同的结果.注意两个错误报告字段都是空的!

"dependencies": {
  "@vue/component-compiler-utils": "3.0.0",
  "vue-template-compiler": "2.6.10"
}
[...]
const ccu = require('@vue/component-compiler-utils');
const vtc = require('vue-template-compiler');

const file = `
<template>
  <div class="component">
    <Unknown></Unknown>
  </div>
</template>

<script>
  export default {
    name: 'Component',
    data: function () {
      return {}
    },
  }
</script>

<style scoped lang="scss">
  .component {
    width: 100px;
    height: 100px;
  }
</style>
`;

const parsed = ccu.parse({
  compiler: vtc,
  source: file,
  needMap: false
});

const compiled = ccu.compileTemplate({
  compiler: vtc,
  source: parsed.template.content,
});

console.log('parsed | errors', parsed.errors);     // [] empty!
console.log('compiled | tips', compiled.tips);     // [] empty!
console.log('compiled | errors', compiled.errors); // [] empty!

推荐答案

很抱歉,我认为答案是这是不可能的.请查看文档的Component Registration部分,了解与我的解释相关的背景信息.

自:

  1. 在Vue应用程序的生命周期内,组件可以随时动态注册(Vue.component('MyComponent', { /* ... */ })个).
  2. 组件可以通过插件添加,甚至可以在初始化后异步添加.
  3. 组件可以是used dynamically个.
  4. 组件名称是简单的字符串,而不是应用程序中允许的名称的某种形式的枚举或等效的"固定"注册表.

代码分析器没有通用的方法来实现您的要求.考虑到上述情况,我并不惊讶于您try 的所有选项都没有报告错误.事实上,相反的情况会令人惊讶,因为它不能与插件注册的组件一起工作.实际上,在运行时之前,没有其他方法可以知道命名组件是否可用.

也就是说,我试着编写一个单元测试来实例化一个使用未知组件的组件.我得到了同样的"未知自定义元素…"控制台中的警告,但由于没有抛出任何内容,测试不会失败!真倒霉我瞥了一眼source code for that warning,不幸的是,任何地方都没有记录丢失的组件.

另一种 Select 是进行单元测试,装载组件,然后通过vm.$refs或DOM元素判断所需组件是否实际呈现.但这似乎是一个很大的麻烦和大量的维护.

但是,我想我找到了一个很好的钩子来得到警告!看看Vue.config.warnHandler.您可以在测试中添加warnHandler来装载组件,并判断是否发出有关缺少元素的警告.

Vue.js相关问答推荐

如何在Vue 3中将动态特性从主零部件同步到子零部件

如果在 VueJS/VuetifyJS 中切换switch,则调用函数

在 Vue 文件中创建根 Vue 实例

vuejs:将props传递给javascript中的组件?

我是否必须在 Vue 3 中使用 Composition API,还是仍然可以使用Vue 2的方式工作?

实现登录命令并访问 vuex 存储

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

是否可以在没有 Vue 的情况下使用 Vuex?

如何将 axios/axios 拦截器全局附加到 Nuxt?

v-model 不会检测到 jQuery 触发事件所做的更改

等待来自 WDS 的更新信号

Vue 3 - 带有全局组件的无法解析组件

当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

Vue代理设置不起作用

如何在 JEST 测试中模拟全局 Vue.js 变量

依赖关系甚至在 package.json 和 node_modules 中都没有定义

使用 Vue 的点击编辑文本字段

脚本npm run dev和npm run watch是做什么用的?

在 vue js 中的何处以及如何存储 API 端点?

我们可以像在 Angular 中一样创建 Vue.js 组件时将 HTML、JS 和 CSS 文件分开吗?