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

Posted 2023-02-22

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

【英文标题】：Vue filters not resolved when file outside of project root

【发布时间】：2018-05-13 09:34:48

【问题描述】：

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

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

\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？或者是否有另一种方法来注册可用于解决此问题的过滤器？

【问题讨论】：

我得到一个不同的错误，它无法从 filters.js 内部解析 vue（在项目结构之外，没有兄弟 node_modules 文件夹）。您使用的是哪个版本的 cli？

嗯..听起来很相似。你遇到了什么错误？

我不确定哪个版本.. error: unknown option '-v' :p

【参考方案1】：

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

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

  export default vueFilters;