Фильтры Vue не разрешаются, когда файл находится за пределами корня проекта

Если я импортирую файл фильтров, который находится вне каталога проекта (регистрируя их с помощью 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)

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

Возможно ли, что из-за того, что filters.js импортирует Vue из другого места, он импортирует другую версию Vue? Или есть другой способ зарегистрировать фильтры, которые можно было бы использовать, чтобы обойти это?


webpack vue.js vue-cli vue-loader vue-filter
person Damon    schedule 29.11.2017    source источник
comment
Я получаю другую ошибку, когда не удается разрешить vue из файла filters.js (вне структуры проекта, нет папки родственных узлов node_modules). Какую версию cli вы используете?   -  person akatakritos    schedule 29.11.2017
comment
Хм .. звучит похоже. какую ошибку вы получаете?   -  person Damon    schedule 29.11.2017
comment
я не уверен, какая версия .. error: unknown option '-v': p   -  person Damon    schedule 29.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Причина этого в том, что Vue.filter() вызывается в другом экземпляре Vue, когда он включается на основе другого package.json, даже если он указывает ту же версию. Может быть способ указать webpack способ компилировать эти вещи по-другому, но лучший подход - преобразовать фильтры в plugin, со сценарием установки, которому вы передаете Vue, так что это тот Vue, который вы уже используете:

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

  export default vueFilters;
person Damon    schedule 18.12.2017