web-dev-qa-db-ja.com

インポートできませんVue vue-cli-serviceによってビルドされたコンポーネント

私はVueでまったく新しいので、おそらく私の問題は些細なことです。

私がしなければならないこと：

Vueコンポーネントを作成して、NPMプライベートリポジトリに配置し、bundle.jsファイルのようなsthを使用して他のプロジェクトにインポートしたい

TLDR：

インポートできませんvue vue-cli-service build --target lib/wcによるコンポーネントビルド。コンポーネントのインポート私は_"export 'HelloWorld' was not found in '../node_modules/hello-world'_にsthsilimarを持っています

長いバージョン：

私はできる限り質問やプロジェクトを行いました。すべてのプロジェクトは、追加の変更なしで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_フォルダーにファイルを生成します。このファイルが正しいと信じたいです。

どちらのシナリオでも、_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_または単にファイルを既存のvueプロジェクトにコピーする
  5. HelloWorldをインポート/表示してみてください

助けていただければ幸いです!!!ありがとう

ノードv10.14.2

npm 6.4.1

vue-Cli 2.9.6（3.3.0でも同じ）

https://github.com/okosowski/vueTest/blob/master/package.json の他の使用バージョン

vue.jsvuejs2web-componentvue-clilib
10
Oskar Kosowski

Vue-cliを使用してVueコンポーネントをビルドおよびテストしているときに、まったく同じ問題に直面していました。幸い、vue-cli Issue Trackerのバグとして報告した後、解決策を見つけることができました。 GitHub。common.jsファイルに問題はなく、バグでもないことが判明しました。

とにかく...簡単に言えば、インポートしようとしている既存のプロジェクトはシンボリックリンクを解決できません（これはnpmリンクを使用すると発生するためです）。問題を解決するには、インポート先のプロジェクトのルートフォルダーにあるvue.config.jsに以下を追加する必要があります。

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

お役に立てれば。詳細については、次のリンクを確認してください。

vue-cliトラッカーの問題レポート
Webpack構成：resolve.symlinks

2
A. B. Al-Idrus