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

はじめに
Laravel Homestead で Vue.jsを導入する方法
1. package.jsonの編集
Vue.jsのサンプル

はじめに

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を開いてください。

{
    "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"
    }
}

{

"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"

1 2	"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"
    }
}

{

"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 //仮想マシンにログイン

vagrant up //仮想マシンの起動

vagrant ssh //仮想マシンにログイン

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

npm install --no-bin-links

1	npm install --no-bin-links

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

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

npm run dev

1	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>

<!DOCTYPE html>

<head>

</head>

<body>

<form>

<div>こんにちは、@{{ myName }} さん。</div><br>

</form>

</div>

</div>

let app = new Vue({

el:'#app',

data:{

myName:'NoName'

}

});

</script>

</body>

</html>

トップページへ戻る