Cannot load assets with laravel mix() function in laravel 5.4 with VueJS

Question

I am using VueJS in Laravel 5.4. I have installed vue dependencies with npm install. running npm run watch or npm run dev the code compiled successfully. The problem I am having is loading assets from resources/assets/

This is what I have done in my blade:

<head>
...
    <link href="{{mix('/css/app.css')}}" rel="stylesheet" type="text/css">

</head>
<body>
....
    <script type="text/javascript" src="{{mix('/js/app.js')}}"></script>

</body>

I am getting the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) for app.js and and app.css

Replacing mix() with asset(), will load stylesheets correctly but app.js will be loaded from public/js/app.js instead of resource/assets/js/app.js

What am I doing wrong. Please help.

user320487 · Accepted Answer · 2018-02-15 10:28:22Z

1

You don't load assets from the resources directory. All your scripts, styles, images,etc. should be located in public. Mix by default will read your js files from resources/assests/js and move them to public after running them through the build pipeline.

mix.js('resources/assets/js/app.js', 'public/js')

That's the out of the box webpack setup in fresh laravel installations.

answered Feb 15, 2018 at 10:28

user320487

Sign up to request clarification or add additional context in comments.

1 Comment

wafutech Over a year ago

Thank you very much for the answer. I modified my webpack.mix.js as so: mix.js('resources/assets/js/app.js', 'public/js/').extract(['vue']) .sass('resources/assets/sass/app.scss', 'public/css'); and included the all the three files in my blade as so: <script src="{{asset('/js/manifest.js')}}"></script> <script src="{{asset('/js/vendor.js')}}"></script> <script src="{{asset('/js/app.js')}}"></script> [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined" (found in <Root>), any guidanace?

4b0 · Accepted Answer · 2018-09-26 05:25:37Z

0

Same issue as me, I changed to below code then it's working.

<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
<script src=" {{ asset('js/app.js') }} "></script>

edited Sep 26, 2018 at 5:25

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Sep 26, 2018 at 5:19

rewdaraw

12 bronze badges

2 Comments

Yunnosch Over a year ago

Would you like to add some explanation to your code-only-answer?

rewdaraw Over a year ago

actually I don't know why... But in my case, when I use mix(), console log shows this path, "localhost/js/app.js ". But when I use asset(), the path is "localhost/laravue/public/js/app.js". And my setting in webpack.mix.js is mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); I don't care... maybe we need to modify mix setting in webpack.mix.js ?

Collectives™ on Stack Overflow

Cannot load assets with laravel mix() function in laravel 5.4 with VueJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related