php-laravel admin

【保存版】laravel + vue.jsが動かないときのチェックポイント｜

パン田@現役エンジニア
きょうはlaravel + vue.jsが動かない時のチェックポイントを教えるよ！

vue.jsの入門者、初心者の人が始めてみたらvue.jsが動かない事がよくあります。

※vue.js２系になります。更新できてなくもて申し訳ない?

今回はそのチェックポイントをすべて教えます。
この記事をすべてチェックすれば必ずあなたのvue.jsは動きます！

【2022年最新】Laravel学習におすすめ

laravelとvue.jsで実務レベルの実践的な動画の教材

vue.jsが動かない！チェックポイントまとめ

どれが原因か分からないと思うので、すべて順番にチェックしてくださいね！

node.jsはインストールされてる？

node -v
v11.14.0

node -vでバージョンは表示されますか？

表示されなければnode.jsをインストールしましょう

 

npmはインストールされてる？

npm -v
6.9.0

npm -vでバージョンは表示されますか？
もしされないならインストールしましょう

まぁ、node.jsをインストールすると勝手にインストールされるんですけど。

package.jsにvueは入ってる？

laravelのプロジェクトルートにあるpackage.jsonにvueは入ってますか？


# laravelのプロジェクトルートにある 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.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.2.0",
        "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",
        "tar": "^4.4.8",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "node-sass": "^4.12.0",
        "quill": "^1.3.6"
    }
}

laravelは5.4か5.3くらいから標準で入ってるらしいです。

npm installした？

laravelのルートディレクトリで↓を実行します。

npm install

npm installするとpackage.jsonに書かれたパッケージがインストールされます。
あと古いやつをアップデートしてくれるぽい？

ぼくが詰まってたときはこれをやって解決しました。

 

npm installしてエラーでたらnpm audit fixした？

なんかパッケージに致命的なバグがあるとエラーが出たりする。vue.jsが動かないのとは直接関係がないと思うけど、やっとくべし。

僕のときはaxios1.8.0が致命的なバグがあったのがひっかかってた。

laravel mix（タスクランナー）は動かした？

ルートディレクトリで↓のどっちかを実行してくださいね。

npm run dev

npm run watch

laravel mixについてざっくり説明すると

  • resource/jsディレクトリ
  • resource/cssディレクトリ

のファイルをコンパイルして、publicなディレクトリに生成したファイルを設置してくれます。

minifyとかもやってくれます。

public/js/app.jsはある？

npm run devでエラーしてなければここにapp.jsファイルができあがる。

ちなみにファイル名はlaravelプロジェクトルートディレクトリのwebpack.mix.jsに定義されているよ。

app.jsにはちゃんとnew Vueとか require(‘vue’)とか書いてある？

resource/js/app.jsはこんな感じになってる？

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

// Vue.component('example-component', require('./components/ExampleComponent.vue').default);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello vue.js!'
    },
});

requireされてたり、new Vue(…)になってる？

viewファイル（blade）にcsrf_token入ってる？

なんか必要らしいです。

headタグの中にある必要があります。

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Laravel</title>

        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
    	<!-- コンポーネントの配置 -->
        <div id="app" style="margin: 30px;">
            <h2>TODOリスト</h2>
            <p v-cloak>@{{ message }}</p>
        </div>
    <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

 

viewファイルにid=”app”は書いてある？

bladeファイルにid=”app”は入ってる？ちなみに書くならdivタグがいいと思うよ。

 

bodyタグの終わり直前で app.jsを読み込んでる？

headタグではダメ。 bodyタグの閉じタグの直前に書くこと。

ちなみにmix(‘js/app.js’)でも asset(‘js/app.js’)でもどっちでもいいよ。

とまぁこんな感じです。

きっと動いたはず。

Laravelとvue.jsでめちゃくちゃ分かりやすい動画

laravelとvue.jsのudemy講座
laravelとvue.jsで実務レベルの実践的な動画の教材

 

関連記事【Laravel】Eloquentにてupsert｜データが無ければcreateやinsertあればupdateする方法

RECOMMENDこちらの記事も人気です。