【Laravel】HomesteadでVue.jsを導入する際に「cross-env: not found」というエラーが発生する問題

Laravel

はじめに

LaravelのHomestead環境下でVue.jsをインストールする際、「cross-env: not found」というエラーが発生してビルドできなかったのでその解決策を紹介します。

動作環境

  • Windows 10 64bit
  • Vue.js 2.6.10
  • Laravel 5.8
  • Vagrant 2.2.5

Laravel Homesteadのインストールはこちらの記事を参照してください。

【Laravel】WindowsでVagrantとVirtualBoxを使ってHomesteadの環境構築を行う方法
はじめに この記事では以下の環境でLaravel Homesteadの環境構築を行います。 Laravelのバージョンによって異なる部分もでてくるとは思いますので、公式のドキュメントと併用しながら環境構築を行ってください。 動作環境 Win...

 

Laravel Homestead で Vue.jsを導入する方法

package.jsonの編集

Laravelをインストールしたフォルダ(ここではLaravelTest)を開き、package.jsonを開いてください。

上記のようにdevDependenciesプロパティに以下のコードを追加してください。

本来であれば、このあと「npm install」すればVue.jsをインストールできるのですが、Homesteadですと、「cross-env: not found」というエラーが発生することがあります。

GitHubでもissueが上がっておりました。
GitHub:Cannot find module cross-env #478

ここの回答によると、pakage.jsonの”scripts”内の存在する「cross-env」というパスでは通らないようで、「node node_modules/cross-env/dist/bin/cross-env.js」に置換してあげる必要があるようです。

pakage.jsonの内容を以下に書き換えてください。

編集が完了したら、コマンドプロンプトを開き、cdでHomesteadをインストールしているディレクトリに移動してください。そして、以下のコマンドを実行してください。

 

その後、cdで仮想マシン内に作成済みのLaravel共有フォルダへ移動してから、以下のコマンドを実行してください。

ここで「–no-bin-links」がないと、またエラーになります。これを追加するのがポイントです。

無事インストールが完了したら、以下のコマンドでビルドしてください。

これで、Vue.jsが読み込めるようになります。

 

Vue.jsのサンプル

 

トップページへ戻る

タイトルとURLをコピーしました