当文件位于项目根目录之外时，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（使用 Vue webpack CLI 构建）

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

是否有可能因为 filters.js 从不同的地方导入 Vue，所以它导入了不同版本的 Vue？或者是否有另一种注册过滤器的方法可以用来解决这个问题？

Answer 1

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

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

  export default vueFilters;

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

Vue filters not resolved when file outside of project root

webpack

vue.js

vue-loader

vue-cli

vue-filter

\utils\filters.js

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