当文件在项目根目录之外时，Vue过滤器未解析

Question

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

如果我将文件的副本保存在应用程序的文件夹中并从那里导入，过滤器将起作用，但是......我不想要同一个文件的副本。 app / build是使用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 (built with Vue webpack CLI)

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

是否有可能因为filters.js从其他地方进口Vue而导入不同版本的Vue？或者是否有其他方法来注册可用于解决此问题的过滤器？

Answer 1

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

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

  export default vueFilters;