webpack - 当文件位于项目根目录之外时，Vue 过滤器未解析

Question

如果我导入位于项目目录之外的过滤器文件（将它们注册到import Vue; Vue.filter(...)我得到错误Failed to resolve filter.

如果我将文件的副本保存在应用程序的文件夹中并从那里导入，过滤器将起作用，但是......我不想要同一个文件的副本。应用程序/构建是使用 Webpack Vue-CLI 创建的。不知道如何解决这个问题。我知道这不是 webpack build/dev 所期望的结构，但我很困惑为什么文件的位置会影响代码的运行方式。

\utils\filters.js

import Vue from 'vue';

Vue.filter('useless', value => {
  return value;
});

\apps\my-app\my-component.vue（使用 Vue webpack CLI 构建）

<script>
import './../../../utils/filters';
</script>

是否有可能因为从不同的地方filters.js导入Vue它正在导入不同版本的 Vue？还是有另一种方法来注册可用于解决此问题的过滤器？

Answer 1

这样做的原因是，当它被包含在Vue.filter()不同的实例上时，它被调用，即使它指定了相同的版本。可能有一种方法可以告诉 webpack 以不同的方式编译这些东西，但更好的方法是将过滤器转换为plugin，并使用您传递的安装脚本，因此它是您已经使用的任何 Vue：Vuepackage.jsonVue

  const vueFilters = {
    install(Vue) {
      Vue.filter('useless', value => {
        return value;
      });
    }
  };

  export default vueFilters;