Project Laravel does not recognize my Javascript file

Question

Project Laravel does not recognize my Javascript file

Navigation

#1 by (0 votes)

4

This is the structure of my project:

Asyoucanseeintheimageabovetheapp.jsfileisintheassets/jsfolder

Myapp.jsfilelookslikethis;

//varurlUsers='https://randomuser.me/api/?results=10';varurlUsers='https://jsonplaceholder.typicode.com/users';newVue({el:'#main',created:function(){this.getUsers();},data:{lists:[]},methods:{getUsers:function(){axios.get(urlUsers).then(response=>{this.lists=response.data});}}});

ThefiletoconfigureJavascriptfilesintheLaravelprojectiswebpack.mix.js

Heislikethis;

letmix=require('laravel-mix');/*|--------------------------------------------------------------------------|MixAssetManagement|--------------------------------------------------------------------------||Mixprovidesaclean,fluentAPIfordefiningsomeWebpackbuildsteps|foryourLaravelapplication.Bydefault,wearecompilingtheSass|filefortheapplicationaswellasbundlingupalltheJSfiles.|*/mix.js(['resources/assets/js/vue.js','resources/assets/js/axios.js','resources/assets/js/app.js',],'public/css/app.js');

Andthemainpagelookslikethis;

<!doctypehtml><htmllang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel e Vue</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>
    <body>
          <div id="main" class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <h1>VUEjs - AJAX axios</h1>
                            <ul class="list-group">
                                <li v-for="item in lists" class="list-group-item">
                                    @{{ item.name }}
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-8">
                            <h1>JSON</h1>
                            <pre>
                                @{{ $data }}
                            </pre>
                        </div>
                    </div>
            </div>
        <script type="text/javascript" src="{{ elixir('js/app.js') }}"> </script>
    </body>
</html>

My browser was meant to appear like this;

Butit'spoppinguplikethis;

WhyismyprojectnotrecognizingtheJavascriptfilesorisitbecausetheapp.jsfileiswithprogramminglogicerror?

======================================================================

Thisismyrepository:

Click here to access the repository

This is the image that appears in the PowerShell consoles log

AndI'mfollowingthiscoursehereonyoutube.

Click here to watch the video lesson.

===================================================== =======

is generating this error;

PS C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud> php artisan clear-compiled
PHP Warning:  require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimi
r\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Warning: require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimir\Des
ktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PHP Fatal error:  require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in
 C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Fatal error: require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in C:\U
sers\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PS C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud> php artisan serve
PHP Warning:  require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimi
r\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Warning: require(C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php): failed to open stream: No such file or directory in C:\Users\wladimir\Des
ktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PHP Fatal error:  require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in
 C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18

Fatal error: require(): Failed opening required 'C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud/vendor/autoload.php' (include_path='C:\xampp\php\PEAR') in C:\U
sers\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud\artisan on line 18
PS C:\Users\wladimir\Desktop\php\laravel-vue-crud-master\laravel-vue-crud>

vue.js laravel-5

asked by anonymous 10.10.2017 / 11:57

1 answer

Self-Signed Certificate Security Error NoClassDefFoundError

score 0 · Answer 1

The problem is that you are specifying an incorrect path within your webpack.mix.js file:

Your file looks like this:

mix.js([
  'resources/assets/js/vue.js',
  'resources/assets/js/axios.js',
  'resources/assets/js/app.js',
], 'public/css/app.js');

Notice that in the last line you put app.js inside the css folder and not js as you call on your home page.

Right command:

mix.js([
  'resources/assets/js/vue.js',
  'resources/assets/js/axios.js',
  'resources/assets/js/app.js',
], 'public/js/app.js');

After that you will need to import vue and axios into your resources / assets / js / app.js file:

import Vue from 'vue'
import axios from 'axios'

Once all this is done npm run dev again.