Q&A前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
Laravelを学習しています。
Vue.jsにてjsを反映させたく進めています。
index.blade.phpにて、グローバルメニューのボタンON/OFFの動作を作っていたところ、app.jsを変更しても、表示が変わりません。cssは反映されますが、jsが反映されません。
下記のエラーは出ているものの、解決策をGoogleにて探しましたが、見つかりませんでした。ご教授いただけますと幸いです。
エラー（検索したが解決策に行きつかず...)
Refused to apply style from 'http://localhost:8081/js/hoge.js' because its MIME type ('application/javascript') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
下記のエラーは、index.blade.phpにて直接記載すると動作していることから、原因ではなさそうだと考えています。
vue.js:634 [Vue warn]: Cannot find element: #app
該当のソースコード
index.blade.php
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Navigation Menu</title> 8 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <!-- css --> 11 <link rel="stylesheet" href="{{ asset('/css/style.css') }}" /> 12 <!-- <link rel="stylesheet" href="{{ asset('/js/hoge.js') }}" /> --> 13 <script src="{{ mix('js/hoge.js') }}"></script> 14 <!-- <script src="{{ asset('/js/hoge.js') }}"></script> --> 15</head> 16<body> 17 <div> 18 <div class="bg-gray-500 lg:bg-blue-500"> 19 <header id="app"> 20 <div class = "mb_nav-container"> 21 <div class="nav_1"> 22 <!-- MB --> 23 <button class="md:hidden" @click="isOpen = !isOpen"> 24 <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24"> 25 <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/> 26 </svg> 27 </button> 28 </div> 29 <!-- ロゴ画像を挿入予定 --> 30 <h1 class="justify-center">@{{msg}}</h1> 31 <div class="nav_3">Cart</div> 32 </div> 33 <div :class="isOpen ? 'block' : 'hidden'"> 34 <ul class="md:flex md:justify-center"> 35 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">shop</a></li> 36 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">about</a></li> 37 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">good for womankind</a></li> 38 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">journal</a></li> 39 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">contact</a></li> 40 </ul> 41 </div> 42 </header> 43 </div> 44 </div> 45 <!-- <script> 46 const app = new Vue({ 47 el : '#app', 48 data: { 49 msg:"this is ok", 50 isOpen: false, 51 } 52 }) 53 </script> --> 54</body> 55</html>
webpack.mix.js
js
1const mix = require('laravel-mix'); 2 3mix.js('resources/js/app.js', 'public/js') 4 .js('resources/js/hoge.js', 'public/js') //←追加 出力元、先（出力名は元のが引き継がれる） 5 .vue() 6 .version() 7 .sass('resources/sass/app.scss', 'public/css'); 8
hoge.js
js
1const app = new Vue({ 2 el : '#app', 3 data: { 4 msg:"this is ok", 5 isOpen: false, 6 } 7});
試したこと
１）index.blade.phpへダイレクトへ書き込み（コメントアウトされている物）
動作を確認
２）mixを利用してみる
hoge.jsを作って反映させたいコードを書いて見たが反映されなかった
３）jsのリンクの貼り方を工夫してみる...
コメントアウトされているのが、試したあとです。。それぞれ、反映されませんでした。
4）version情報を追加してみる
https://qiita.com/Masahiro111/items/82d1105aa5d82ee23282
補足情報（FW/ツールのバージョンなど）
開発環境：
OS: MacOS Catalina v10.15.7
Docker 20.10.0
Laravel: 8.25.0
css: Tailwind
js: vue.js: 2.6.12
回答1件
0
自己解決
挿入する位置を変えたところ、jsが適用されました。。
php
1<script src="{{ asset('/js/hoge.js') }}"></script>
下記が全体的なコードです。
Laravel8のドキュメントを見ているのですが、、挿入する場所は下の方でないといけないのでしょうか。。
解決とはなりますが、何かご存知の情報あれば、情報いただければ幸いです。
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Navigation Menu</title> 8 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <!-- css --> 11 <link rel="stylesheet" href="{{ asset('/css/style.css') }}" /> 12 <!-- <link rel="stylesheet" href="{{ asset('/js/hoge.js') }}" /> --> 13 <!-- <script src="{{ mix('js/hoge.js') }}"></script> --> 14 <!-- <script src="{{ asset('/js/hoge.js') }}"></script> --> 15</head> 16<body> 17 <div> 18 <div class="bg-gray-500 lg:bg-blue-500"> 19 <header id="app"> 20 <div class = "mb_nav-container"> 21 <div class="nav_1"> 22 <!-- MB --> 23 <button class="md:hidden" @click="isOpen = !isOpen"> 24 <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24"> 25 <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/> 26 </svg> 27 </button> 28 </div> 29 <!-- ロゴ画像を挿入予定 --> 30 <h1 class="justify-center">@{{msg}}</h1> 31 <div class="nav_3">Cart</div> 32 </div> 33 <div :class="isOpen ? 'block' : 'hidden'"> 34 <ul class="md:flex md:justify-center"> 35 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">shop</a></li> 36 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">about</a></li> 37 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">good for womankind</a></li> 38 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">journal</a></li> 39 <li><a href="#" class="block px-8 py-2 hover:bg-gray-600 rounded">contact</a></li> 40 </ul> 41 </div> 42 </header> 43 </div> 44 </div> 45 <!-- <script> 46 const app = new Vue({ 47 el : '#app', 48 data: { 49 msg:"ec sample", 50 isOpen: false, 51 } 52 }) 53 </script> --> 54 <!-- 場所！？ここだとJSが適用される... --> 55 <script src="{{ asset('/js/hoge.js') }}"></script> 56</body> 57</html>
投稿2021/02/07 06:55
総合スコア28
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。