Laravel 6.x 【Laravel-mix】 で JavaScriptをコンパイルしても動作しません。 解決方法を教えてください。
Q&A
Closed
制作環境
Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
Vue : 2.5.17
jQuery : 3.2
XAMPP
PHP : 7.4.3
Visual Studio Code
はじめに
BootstrapとVueとjQueryは、全てLaravel-mixでコンパイルしたものを使用するよにしています。
質問内容
JavaScriptで記述したtest.jsファイルをコンパイルし、Laravel-mixでスクリプトを読み込んでいるのですが、何故か動作しません。
解決方法があれば教えていただきたいです。
できればLaravel-mixを使えるようにしたいです。
本当は入力したコードを検索させるプログラムを作りたいのですが、ここでつまずいた為、以下のような小規模なプログラムを作成し、色々試してみましたが、解決できませんでした。
試した内容は以下の通りです。
プログラム
先ず、以下のようなシンプルなプログラムを作成しました。
ルーティング
web.php
Route::get('/test', 'TestController@index');
コントローラ
TestControllerl.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TestController extends Controller
{
public function index()
{
return view('test');
}
}
ビュー
test.blade.php
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<title>テスト</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="mt-5">
<label>コード<input type="text" id="code"></label>
</div>
<div id="input_value"></div>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
app.jsの記述
※コメントは削除してます。
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
data() {
return {}
},
});
webpack.mix.jsの記述
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
イメージ
inputの項目が表示してあるだけです。
試した事
inputに入力した値を下に表示するようにします。
検証① JavaScriptをBladeテンプレートに記述
ビューを以下のように変更しました。
test.blade.php
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<title>テスト</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="mt-5">
<label>コード<input type="text" id="code"></label>
</div>
<div id="input_value"></div>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
<script>
document.getElementById("code").addEventListener("input", function() {
let getCode = document.getElementById("code").value;
document.getElementById("input_value").innerHTML = getCode;
})
</script>
</body>
</html>
結果:問題なく動作しました。
動作イメージ
検証② Laravel-mixを使用する
ビューを元に戻しました。
test.blade.php
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<title>テスト</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="mt-5">
<label>コード<input type="text" id="code"></label>
</div>
<div id="input_value"></div>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
次に、resources>js内に新しくtest.jsファイルを作成し以下のように記述。
test.js
document.getElementById("code").addEventListener("input", function() {
let getCode = document.getElementById("code").value;
document.getElementById("input_value").innerHTML = getCode;
})
同じディレクトリ内のapp.jsに、以下の記述を追記。
app.js
require('./test');
最後にターミナルで以下を実行。
npm run dev
結果:動作しません。
検証③ スクリプトを別で読み込む
app.jsのrequire('./test');は削除しておきます。
ビューを以下のように修正します。
test.blade.php
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<title>テスト</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="mt-5">
<label>コード<input type="text" id="code"></label>
</div>
<div id="input_value"></div>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('js/test2.js') }}"></script>
</body>
</html>
public>js内に新しくtest2.jsファイルを作成します。
test2.js
document.getElementById("code").addEventListener("input", function() {
let getCode = document.getElementById("code").value;
document.getElementById("input_value").innerHTML = getCode;
})
結果:問題なく動作しました。
その他
他にextractを使い、webpack.mix.jsでvueとaxiosを分離してみたりしましたが、結果変わらずでした。
検証②の方法で動作するようにするには、どうすればいいのでしょうか?
よろしくお願いいたします。
0