目次
npm を正しく実行します。インストールが成功した後、
node-sass を再構築します。次のコマンドを必ず実行してください:
vue-loader の最新バージョンをインストールする必要があります
当初、laravel vue2 を使用して小さなデモを作成する予定でしたが、上記の 4 つに遭遇しました。インストールおよび実行プロセス中に問題が発生します。4 つの質問が順番に表示されます。上記に従って解決すれば、基本的には正常にクリアできます。質問がある場合は、メッセージを残して連絡することができます。
ホームページ PHPフレームワーク Laravel Homesteadでlaravel-mixを使用する際の問題の概要

Homesteadでlaravel-mixを使用する際の問題の概要

Mar 31, 2021 pm 05:31 PM
laravel node.js npm

laravel の次のチュートリアル コラムでは、Homestead で laravel-mix を使用する際の問題点をまとめます。

laravel の公式ドキュメントによると、laravel-mix を使用する準備をしているときに多くの問題に遭遇しました。私も同じ問題に遭遇し、これらの問題を解決するのに時間を費やしました。皆さんが穴埋めの時間を短縮できるように、ここにメモしておきます。

環境

  • laravel v5.4

  • ノードv6.10.2

  • #npm v3.10.10

Homestead のノードと npm のデフォルト バージョンは上記のとおりです
問題

1. npm intal を直接実行すると、 Symlink エラーが表示されます

Homesteadでlaravel-mixを使用する際の問題の概要

このエラーは、公式ドキュメントを注意深く読んでいないために発生します。

npm install --no-bin-links# を実行する必要があります。 # #Windows システムまたは Windows システム上で実行されている VM を使用している場合は、npm install コマンドを実行するときに --no-bin-links をオンにする必要があります

2.cross-env : not found

npm を正しく実行します。インストールが成功した後、

npm run dev

を実行すると、cross-env:not found エラーが表示されます。 laravel 5.4のpackage.jsonの内容は以下の通りです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{   &quot;private&quot;: true,   &quot;scripts&quot;: {     &quot;dev&quot;: &quot;npm run development&quot;,     &quot;development&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,     &quot;watch&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,     &quot;watch-poll&quot;: &quot;npm run watch -- --watch-poll&quot;,     &quot;hot&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,     &quot;prod&quot;: &quot;npm run production&quot;,     &quot;production&quot;: &quot;cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;   },   &quot;devDependencies&quot;: {     &quot;axios&quot;: &quot;^0.16.2&quot;,     &quot;bootstrap-sass&quot;: &quot;^3.3.7&quot;,     &quot;cross-env&quot;: &quot;^5.0.1&quot;,     &quot;jquery&quot;: &quot;^3.1.1&quot;,     &quot;laravel-mix&quot;: &quot;^1.0&quot;,     &quot;lodash&quot;: &quot;^4.17.4&quot;,     &quot;vue&quot;: &quot;^2.1.10&quot;   } }</pre><div class="contentsignin">ログイン後にコピー</div></div>次のように変更してください

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-loader": "^13.0.0"
  }
}
ログイン後にコピー

スクリプトの違いに注意してください

3. no such file or directory, scandir '…/node_modules/node-sass/vendor

node-sass を再構築します。次のコマンドを必ず実行してください:

npm build node-sass --no -bin- links

4. TypeError:loader.charAt は関数ではありません

vue-loader の最新バージョンをインストールする必要があります

npm install vue-loader - -save-dev --no-bin-links

End

当初、laravel vue2 を使用して小さなデモを作成する予定でしたが、上記の 4 つに遭遇しました。インストールおよび実行プロセス中に問題が発生します。4 つの質問が順番に表示されます。上記に従って解決すれば、基本的には正常にクリアできます。質問がある場合は、メッセージを残して連絡することができます。

[推奨:
最新の 5 つの Laravel ビデオ チュートリアル

]

以上がHomesteadでlaravel-mixを使用する際の問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Laravelで電子メールの送信が失敗したときに返品コードを取得する方法は? Laravelで電子メールの送信が失敗したときに返品コードを取得する方法は? Apr 01, 2025 pm 02:45 PM

Laravelの電子メールの送信が失敗したときに戻りコードを取得する方法。 Laravelを使用してアプリケーションを開発する場合、検証コードを送信する必要がある状況に遭遇することがよくあります。そして実際には...

Laravelスケジュールタスクは実行されません:スケジュール:実行コマンドの後にタスクが実行されていない場合はどうすればよいですか? Laravelスケジュールタスクは実行されません:スケジュール:実行コマンドの後にタスクが実行されていない場合はどうすればよいですか? Mar 31, 2025 pm 11:24 PM

LaravelスケジュールタスクRAN RANSPONSIVEトラブルシューティングRALAVELのスケジュールタスクスケジューリングを使用すると、多くの開発者がこの問題に遭遇します。スケジュール:実行...

Laravelでは、検証コードが電子メールで送信できない状況に対処する方法は? Laravelでは、検証コードが電子メールで送信できない状況に対処する方法は? Mar 31, 2025 pm 11:48 PM

Laravelの電子メールの検証コードの送信の障害を処理する方法は、Laravelを使用することです...

DCAT管理者にデータを追加するためにクリックのカスタムテーブル関数を実装する方法は? DCAT管理者にデータを追加するためにクリックのカスタムテーブル関数を実装する方法は? Apr 01, 2025 am 07:09 AM

DCATを使用するときにDCATADMIN(Laravel-Admin)にデータを追加するためにカスタムクリックのテーブル関数を実装する方法...

Laravel Redis接続共有:選択方法が他の接続に影響するのはなぜですか? Laravel Redis接続共有:選択方法が他の接続に影響するのはなぜですか? Apr 01, 2025 am 07:45 AM

Laravel FrameworkでRedis接続の共有の影響とLaravelフレームワークとRedisを使用する際のメソッドを選択すると、開発者は問題に遭遇する可能性があります。

Laravel Multi-Tenant Extension Stancl/Tenancy:テナントデータベース接続のホストアドレスをカスタマイズする方法は? Laravel Multi-Tenant Extension Stancl/Tenancy:テナントデータベース接続のホストアドレスをカスタマイズする方法は? Apr 01, 2025 am 09:09 AM

Laravel Multi-Tenant拡張機能パッケージStancl/Tenancyのカスタムテナントデータベース接続Laravel Multi-Tenant ExtensionパッケージStancl/Tenancyを使用したマルチテナントアプリケーションを構築する際の...

Laravel - アクション URL Laravel - アクション URL Aug 27, 2024 am 10:51 AM

Laravel - アクション URL - Laravel 5.7 では、「呼び出し可能なアクション URL」と呼ばれる新機能が導入されています。この機能は、アクションメソッドで文字列を受け入れるLaravel 5.6の機能に似ています。 Laravel 5.7 で導入された新しい構文の主な目的は、

バングラ部分モデル検索のlaravelEloquent orm) バングラ部分モデル検索のlaravelEloquent orm) Apr 08, 2025 pm 02:06 PM

LaravelEloquentモデルの検索:データベースデータを簡単に取得するEloquentormは、データベースを操作するための簡潔で理解しやすい方法を提供します。この記事では、さまざまな雄弁なモデル検索手法を詳細に紹介して、データベースからのデータを効率的に取得するのに役立ちます。 1.すべてのレコードを取得します。 ALL()メソッドを使用して、データベーステーブルですべてのレコードを取得します:useapp \ models \ post; $ post = post :: all();これにより、コレクションが返されます。 Foreach Loopまたはその他の収集方法を使用してデータにアクセスできます。

See all articles