Q&A実現したいこと
- Laravel10 blade.phpファイルから「resources/js」内にあるjsファイルを読み込みたい
前提
WindowsPC上にWSLを使って建てた、仮想のUbuntsu環境下で、Laravel10の学習を行っております。
blade.phpファイルから
「resources/js」内にあるjsファイルを読み込もうと思い、
blade.phpファイル内に、<script src="{{asset('resources/js/hoge.js')}}"></script>
のような形で記述してみましたが、読み込めませんでした。
調べたところ、Viteでビルドしてからでないと、jsファイルは読み込めないという話を見つけましたので、
viteをインストールの上、npm run buildでビルドを試みました。
しかし、以下のエラーが発生しました。
発生している問題・エラーメッセージ
'\\wsl.localhost\Ubuntu\home\username\example-app' 上記の現在のディレクトリで CMD.EXE を開始しました。 UNC パスはサポートされません。Windows ディレクトリを既定で使用します。 vite v4.4.9 building for production... ✓ 0 modules transformed. ✓ built in 3.29s Could not resolve entry module "index.html". error during build: RollupError: Could not resolve entry module "index.html". at error (file:///C:/Users/username/AppData/Roaming/npm/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry .js:2287:30) at ModuleLoader.loadEntryModule (file:///C:/Users/username/AppData/Roaming/npm/node_modules/vite/node_modules/rollup/di st/es/shared/node-entry.js:24881:20) at async Promise.all (index 0)
エラーメッセージから、
「ビルドの際に参照するファイルのパスが、Windowsのルートディレクトリを起点にされてしまっていることで、必要なファイルが見つからず、エラーが起きている」
と理解しております。
この場合、どうすればUbuntsuのディレクトリでファイルを探すようにできるのでしょうか。
試したこと
・jsファイルを「resources/js」内に置く
・blade.php内で、<script src="{{asset('resources/js/currentTimer.js')}}"></script>とする
・npm run buildでviteのビルドを実行
回答1件
0
自己解決
別のところで頂戴したアドバイスを基に、解決いたしました。
以下に原因と解決手段をまとめておきます。
原因
windowsの方のnpmを呼び出して処理を行っていたため、エラーが発生していた。
解決手段
sail npm install viteで、viteをインストール- プロジェクトのルートディレクトリにできた「vite.config.js」ファイルに設定を追記
- resource/js 内にある「main.js」内で、読み込みたいjsファイルをimport
sail npm run devで、コンパイル実行- blade.phpファイル内の
<header>内で、読み込みたいjsファイルの読み込みを行う - jsファイル読み込み完了！
*2補足
javascript
1export default defineConfig({ 2 plugins: [ 3 laravel({ 4 input: ['resources/css/app.css', 'resources/js/app.js'], 5 refresh: true, 6 }), 7 ], 8 root: './', // プロジェクトのルートディレクトリ 9 base: '/dist/', // 出力ファイルのベースパス 10 build: { 11 outDir: 'public/dist', // 出力先のディレクトリ 12 rollupOptions: { 13 input: 'resources/js/main.js', // Viteがバンドルを作成する際に起点とするjsファイルを指定 14 } 15 } 16});
*3補足
javascript
1import fizz from './fizz.js'; 2import buzz from './buzz.js'; 3import fizzbuzz from './fizzbuzz.js';
*呼び出し元のblade.phpファイル内の<head>内で、コンパイルして生成されたjsファイルの読み込みを行う
<head> <!-- titleとかlinkとか --> @vite('resources/js/fizzbuzz.js') <!--3でimportしたファイルの中から選ぶ--> </head>
投稿2023/10/03 09:32
総合スコア3
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。