前提
LaravelとVueの連携の学習をしているのですが、cssファイルとjsファイルが読み込めないです。
npm run dev のコマンドを実行しましたが、publicディレクトリ内にcssファイルとjsファイルが作成されていないようでした。
発生している問題・エラーメッセージ
Chromeの検証ツールで下記エラーが出ています。
GET http://127.0.0.1:3000/css/app.css net::ERR_CONNECTION_REFUSED GET http://127.0.0.1:3000/js/app.js net::ERR_CONNECTION_REFUSED
該当のソースコード
webpack.mix.js
1onst mix = require('laravel-mix'); 2 3/* 4 |-------------------------------------------------------------------------- 5 | Mix Asset Management 6 |-------------------------------------------------------------------------- 7 | 8 | Mix provides a clean, fluent API for defining some Webpack build steps 9 | for your Laravel application. By default, we are compiling the Sass 10 | file for the application as well as bundling up all the JS files. 11 | 12 */ 13 14mix.js('resources/js/app.js', 'public/js') 15 .vue() 16 .sass('resources/sass/app.scss', 'public/css'); 17
app.blade.php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <!-- CSRF Token --> 8 <meta name="csrf-token" content="{{ csrf_token() }}"> 9 10 <title>{{ config('app.name', 'Laravel Vue') }}</title> 11 12 <!-- Styles --> 13 <link href="{{ mix('/css/app.css') }}" rel="stylesheet"> 14</head> 15<body> 16 <div id="app"> 17 <example-component></example-component> 18 </div> 19 20 <!-- Scripts --> 21 <script src="{{ mix('/js/app.js') }}" defer></script> 22</body> 23</html>
補足情報(FW/ツールのバージョンなど)
dockerを使用しています。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。