4

Essa é a estrutura do meu projeto:

inserir a descrição da imagem aqui

Como vocês podem ver na imagem acima o arquivo app.js está na pasta assets/js

meu arquivo app.js está assim;

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

O arquivo para configurar os arquivos Javascript no projeto Laravel é o webpack.mix.js

Ele está assim;

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

E a pagina principal está assim;

<!doctype html>
<html lang="{{ 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>

Meu browser era para aparece assim;

inserir a descrição da imagem aqui

mas está aparecendo assim;

inserir a descrição da imagem aqui

Porque será que meu projeto não está reconhecendo os arquivos Javascript ou é porque o arquivo app.js está com erro de lógica de programação?

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

Esse é meu repositório:

Clique aqui para acessar o repositório

Essa é a imagem que aparece no log do consoles PowerShell

inserir a descrição da imagem aqui

E estou seguindo esse curso aqui no youtube.

Clique aqui para ver a vídeo aula.

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

está gerando esse erro;

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>
4
  • Tens algum erro na consola?
    – Sergio
    10/10/2017 às 9:59
  • Onde é defenida no Laravel a pasta root/public do cliente?
    – Sergio
    10/10/2017 às 10:00
  • Não aparece mensagens de erro no console do Google Chrome, a pasta está definida como sendo o assets/js quero pedir desculpas se de repente minha resposta não é compatível com a pergunta, é porque eu comecei a estudar PHP Laravel a pouco tempo.
    – user10264
    10/10/2017 às 10:11
  • Por favor visualize novamente minha postagem, pois eu fiz atualizações.
    – user10264
    10/10/2017 às 10:12

1 Resposta 1

1

O problema é que você está especificando um caminho incorreto dentro do seu arquivo webpack.mix.js:

O seu arquivo está assim:

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

Perceba que na última linha você coloca o app.js dentro da pasta css e não js como você chama na sua página principal.

Comando certo:

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

Depois disso você vai precisar importar o vue e o axios dentro do seu arquivo resources/assets/js/app.js:

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

Feito tudo isso execute o npm run dev novamente.

7
  • Saudação @JuniorNunes , mas ainda continuar com o problema.
    – user10264
    10/10/2017 às 11:49
  • @wladyband deu um npm run novamente? 10/10/2017 às 11:59
  • Eu não estou usando o npm run, mas fiz assim, eu executei o npm run e depois executei o php artisan serve, e mesmo assim continuar com problema, tenho uma observação, quando executo no npm run dev ele não mostra nada, eu já tentei na porta 8000, 8006 e 8080, mas quando executo o php artisan serve ele me mostra pela porta 8000, mas é assim... ainda está com o mesmo problema.
    – user10264
    10/10/2017 às 12:22
  • será que você se incomodaria de baixar meu projeto e testar localmente? por favor.
    – user10264
    10/10/2017 às 12:24
  • @wladyband já identifiquei o problema e consegui rodar localmente, editei a resposta da uma olhada! Vou "comitar" as modificações que fiz. 10/10/2017 às 12:34

Você deve fazer log-in para responder a esta pergunta.