Ankündigung

Einklappen
Keine Ankündigung bisher.

In Laravel wird scheinbar an der falschen Stelle nach app.js gesucht.

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • In Laravel wird scheinbar an der falschen Stelle nach app.js gesucht.

    Ich habe ein Laravelprojekt, in dem ich unter resources eine Datei app.js habe sowie dann eben Articles.vue unter components. Die Struktur des Projekts sieht wie folgt aus, zu den Dateien siehe weiter unten:



    2020-09-21 14_57_51-laravel - Apache NetBeans IDE 12.0.png



    app.js:

    PHP-Code:
    /**
    * First we will load all of this project's JavaScript dependencies which
    * includes Vue and other libraries. It is a great starting point when
    * building robust, powerful web applications using Vue and Laravel.
    */

    require('./bootstrap');
    window.Vue = require('vue');


    /**
    * The following block of code may be used to automatically register your
    * Vue components. It will recursively scan this directory for the Vue
    * components and automatically register them with their "basename".
    *
    * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
    */

    // const files = require.context('./', true, /\.vue$/i)
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))


    Vue.component('articles',

    require(
    './components/Articles.vue').default

    );


    /**
    * Next, we will create a fresh Vue application instance and attach it to
    * the page. Then, you may begin adding components to this application
    * or customize the JavaScript scaffolding to fit your unique needs.
    */


    const app = new Vue({

    el'#app'

    }); 

    Und die Articles.vue sieht wie folgt aus:

    PHP-Code:
    <template>

    <
    div>

    <
    h2>Articles</h2>

    </
    div>

    </
    template
    Die Articles.vue ist ein tamplate, dass ich in einer blade-Datei, nämlich pizzas.blade.php, dies wie folgt:

    PHP-Code:
    @extends('layouts.layout'

            @
    section('content'
            <
    div class="default-textfield">

                 <
    p>Order Pizzas:</p>   

                         <
    div id="app">
                           <
    div class="container">  Wieso erscheint hier das Template nicht?  
                             <
    articles></articles>
                           </
    div>
                        </
    div>

                       <
    script src="{{ asset('js/app.js') }}"></script>

                   <p>Pizzas Ordered:</p>      

                    @foreach($pizzas as $pizza)
                      <div>
                         {{ $pizza->name }} - {{ $pizza->type }} - {{ $pizza->base }}
                      </div>
                    @endforeach

            </div>
            @endsection 
    Diese Pizzas-blade-Datei ist eine Erweiterung von layout.blade.php, die wie folgt aussieht:

    PHP-Code:
    <!DOCTYPE html>
    <
    html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <
    head>
            <
    meta charset="utf-8">
            <
    meta name="viewport" content="width=device-width, initial-scale=1">
            <
    meta name="csrf-token" content="{{ csrf_token() }}">
            <
    script>window.Laravel = { csrfToken'{{ csrf_token() }}' }
            
    </script>

            <title></title>

            <!-- Fonts -->
            <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

            <style>

                /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}

                body {
                    font-family: 'Nunito';
                    background-color:blue;
                }
                p {
                    text-align: center;
                }
                footer {
                    background: blue;
                    color: gray;
                    padding: 20px;
                    text-align: center; 
                }
                .default-textfield {
                    padding: 15px;
                    color: white;
                    height: 400px;
                    font-size:30px;
                }

            </style>

        </head>
        <body>

             @yield('content')

            <footer>
              Copyright 2020 AFX
            </footer>

        </body>
    </html> 
    Mein Problem ist nun:

    In der pizzas.blade.php-Datei wird das Vue.js-Template nicht importiert, denn irgendwie wird aus "<script src="{{ asset('js/app.js') }}"></script>" "<script src="http://localhost/project/public/js/app.js"></script>" gemacht. Kann ich das irgendwo einstellen, dass der an der richtigen Stelle nach der app.js sucht, oder habe ich da grundsätzlich was falsch gemacht?






  • #2
    Ich kenne mich mit Laravel nicht so gut aus, aber ich denke einfach mal das die Asset Sachen von Symfony verwendet werden. Und hier wird immer vom Document Root public ausgegangen. Wenn ich es richtig gesehen habe, hast du dein Ressources Ordner aber eine Ebene unter dem Public Ordner. Wenn der Webserver nun als Einstiegspunkt deine index.php auis dem Public Ordner hat, müsstest du deine Ressources Ordner in den Public Ordner verschieben, damit dies wieder passt.

    Scheinbar hat Laravel auch eine Funktion zum Kompilieren von Assets, vll. bringt dich dies auch weiter: https://laravel.com/docs/8.x/mix

    Kommentar


    • #3
      Ich hab die app.js aund die Vue jetzt einfach in den public-Ordner reinkopiert, das Ganze neu gebaut und jetzt geht's.

      Kommentar


      • #4
        Resources-Ordner ist nicht public. Die assets()-Funktion geht immer auf den public-Ordner und schaut dort nach.
        Das kopieren kannst du ganz einfach mit npm run dev / npm run development machen. Dann kompiliert er dein SCSS und Vue zu CSS und JS und packt es in den Public-Ordner.

        Ich empfehle dir in der Doku den Abschnitt durchzulesen, da stehen alle wichtigen Informationen: https://laravel.com/docs/8.x/mix

        Kommentar

        Lädt...
        X