Cloud E Office への [vue-Chat-demo] プロジェクトのインポート
1. 問題が発生する
- sass-loader と node-sass をインストールする必要があることを示すプロンプト
- sass-loader をインストールした後、実行するとエラーが発生します
typeError: this.getOptions is not a function- ノード Sass のインストールに失敗しました
2. 解決策
ノードのバージョンと Webpack のバージョンに従って、対応するバージョンのノード sass と sass-loader をインストールします。
たとえば、私のマシンでは次のようになります。
node -v
# 14.17.1
npm list webpack
# 4.46.0
したがって、[email protected] と [email protected] をインストールします。
npm install node-sass@4.14.1 --save-dev
npm install sass-loader@10.4.0 --save-dev
3. 解決策の詳細
3.1 問題が発生する
vue-chat アドレス:
- プロジェクトアドレス (原著者): https://github.com/coffcer/vue-chat
- このプロジェクトのアドレス (リファクタリング済み): https://github.com/is-liyiwei
プロジェクトをインポートするときに、すべてのファイルをフロントエンド プロジェクトに入れて実行すると 2 つの問題が発生しました。初めて実行したとき、sass-loader をインストールするように求められました。直接 npm install sass-loader を実行してから、プロジェクトを実行しました。
エラー: typeError: this.getOptions は関数ではありません
。典型的な問題です。これはバージョンの不一致であるはずです。
3.2 sass-loader バージョンのクエリとインストール
- NPM パッケージ クエリ Web サイトで sass-loader を検索し、入力します。
- sass-loaderのgithubリポジトリに入る
- package.json ファイルを開いて、依存プロジェクトのバージョンを確認します。
4. ローカル ノードと Webpack の情報を確認し、ノードのバージョン情報を v14.17.1、Webpack のバージョン情報を @4.46.0 として取得します。
node -v
npm list webpack
ノードと Webpack に従って sass-loaderde バージョンを選択します: 10.4.0。
- ローカルノードのバージョン情報はv14.17.1、Webpackのバージョン情報は@4.46.0です。
- [email protected] では、ノードのバージョンが 10.13.0 以上であり、メジャー バージョンが 4 の場合は Webpack のバージョンが 4.36.0 以降、メジャー バージョンが 5 の場合は 5.0.0 以降である必要があります。 。
npm install sass-loader@10.4.0 --save-dev
3.3 node-sass バージョンのクエリとインストール
sass-loader をインストールした後、プロジェクトを実行するときに、node-sass をインストールするように求められます。
直接npm installでnode-sassをインストールしたところ、インストールできないことが分かり、最初はネットワークの問題かと思ったのですが、後でnode-sassとnodeにもバージョン依存関係があることが分かりました。参照:公式のnode-sassとnodeの対応表
次に、バージョン4.14.0と4.14.1を確認し
、[email protected]をインストールします。
npm install node-sass@4.14.1 --save-dev
わかりました！これで完了です。
4. まとめ
初心者へのメッセージ: 問題を解決するときの経験を総括してください。
- 依存関係の欠落やバージョンの問題など、一般的なエラー メッセージを理解しておく必要があります。
- NPM パッケージ クエリ ツールは、npm URL を使用する場合によく使用します。
- 過去のバージョンの表示など、GitHub の使用。
- Vue プロジェクトの構造。