【Laravel】HomesteadでVue.jsを導入する際に「cross-env: not found」というエラーが発生する問題
2019-09-22
はじめに
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のインストールはこちらの記事を参照してください。
/posts/laravel-homestead-setup/
Laravel Homestead で Vue.jsを導入する方法
package.jsonの編集
Laravelをインストールしたフォルダ（ここではLaravelTest）を開き、package.jsonを開いてください。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "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",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
}
}
上記のようにdevDependenciesプロパティに以下のコードを追加してください。
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"本来であれば、このあと「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の内容を以下に書き換えてください。
{
"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": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"cross-env": "^5.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
}
}
編集が完了したら、コマンドプロンプトを開き、cdでHomesteadをインストールしているディレクトリに移動してください。そして、以下のコマンドを実行してください。
vagrant up //仮想マシンの起動
vagrant ssh //仮想マシンにログインその後、cdで仮想マシン内に作成済みのLaravel共有フォルダへ移動してから、以下のコマンドを実行してください。
npm install --no-bin-linksここで「--no-bin-links」がないと、またエラーになります。これを追加するのがポイントです。
無事インストールが完了したら、以下のコマンドでビルドしてください。
npm run devこれで、Vue.jsが読み込めるようになります。
Vue.jsのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
{{-- Vue関連の読みこみ --}}
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<meta name="csrf-token" content="{{ csrf_token()}}">
{{-- /. Vue関連の読みこみ --}}
</head>
<body>
<div id="app">
<form>
<label for="name">name</label>
<input type="text" id="name" v-model="myName" /><br>
<div>こんにちは、@{{ myName }} さん。</div><br>
</form>
</div>
{{-- Vue関連の読みこみ --}}
<div class="vue">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</div>
{{-- /. Vue関連の読みこみ --}}
<script>
let app = new Vue({
el:'#app',
data:{
myName:'NoName'
}
});
</script>
</body>
</html>
