невозможно импортировать компонент Vue, созданный vue-cli-service - PullRequest
Новая
       17

невозможно импортировать компонент Vue, созданный vue-cli-service

0 голосов
/ 08 января 2019

Я совсем новичок в Vue и, возможно, моя проблема тривиальна.

Что я должен сделать:

Я хочу создать компонент Vue, который я могу поместить в частное репозиторий NPM и импортировать его в другие проекты с помощью файла sth, подобного bundle.js

TLDR:

не может импортировать сборку компонента vue с помощью сборки vue-cli-service --target lib / wc. Импортируемый компонент у меня есть sth silimar в "export 'HelloWorld' was not found in '../node_modules/hello-world'

длинная версия:

Я задавал вопросы и проекты столько, сколько мог. Все проекты построены vue-cli без каких-либо дополнительных изменений.

    1. создать новый проект по умолчанию vue create hello-world
    1. по умолчанию у нас есть первый компонент здесь - src/component/HelloWorld, и для этого примера это компонент, который мы хотим экспортировать
    1. с помощью vue-cli-service попытайтесь создать экспортируемый файл.

  • 3a. vue-cli-service build --target lib --name vue-test ./src/components/index.js где index.js 

    import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';

const Components = {
    HelloWorld,
};

Object.keys(Components).forEach((name) => {
    Vue.component(name, Components[name]);
});

export default Components;

  • 3b. или напрямую vue file vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'

в обоих сценариях vue-cli-service создает файл в папке /dist, и я хочу верить, что этот файл правильный

в обоих сценариях я не могу импортировать этот компонент в другой проект vue , используя import {HelloWorld} from 'path/to/folder/or/file'; или require('path/to/folder/or/file'). Похоже, файлы комплекта не экспортированы.

что я делаю не так? Следует использовать build --target wc или build --target lib?

Если вы не хотите создавать новое приложение для воспроизведения этой проблемы, вы можете загрузить репозиторий с https://github.com/okosowski/vueTest (проект запущен с использованием vue cli).

  1. git clone
  2. npm install
  3. npm run build-bundle-lib или npm run build-bundle-lib
  4. npm link или просто скопируйте файл в существующий проект
  5. попытаться импортировать / отобразить HelloWorld

Буду благодарен за любую помощь !!! спасибо

узел v10.14.2

нпм 6.4.1

vue-Cli 2.9.6 (то же самое на 3.3.0)

другая используемая версия в https://github.com/okosowski/vueTest/blob/master/package.json

1 Ответ

0 голосов
/ 22 января 2019

Я столкнулся с той же самой проблемой, когда использовал vue-cli для сборки и тестирования моего компонента Vue. К счастью, я смог найти решение, сообщив об этом как об ошибке в трекере проблем vue-cli на GitHub. Оказалось, что в файле common.js нет ничего плохого, и в этом нет ошибки.

В любом случае ... Короче говоря, существующий проект, в который вы пытаетесь импортировать, не может разрешить символические ссылки (потому что это то, что происходит, когда вы используете ссылку npm). Чтобы решить вашу проблему, вам нужно добавить следующее в vue.config.js в корневой папке проекта, в который вы импортируете: 

// vue.config.js
module.exports = {
    chainWebpack: config => config.resolve.set('symlinks', false)
}

Надеюсь, это поможет. Для получения дополнительной информации, проверьте эти ссылки:

Мой отчет о проблеме в треере vue-cli
Конфигурация веб-пакета: resol.symlinks

...