Laravel 5.7 не может использовать ресурсы с Vue в шаблоне блейда - PullRequest
Новая
       11

Laravel 5.7 не может использовать ресурсы с Vue в шаблоне блейда

0 голосов
/ 02 февраля 2019

Здравствуйте, у меня Laravel версии 5.7.24.У меня проблема с импортом app.js в шаблон блейда.У меня app.js в resources/js/app.js, этот же файл находится в другом месте: public/js/app.js

В welcome.blade.php я добавляю: 

<body>
    <div id="app">
        Hello
        <example-component></example-component>
        <articles></articles>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

Я создал компонент статей в resources/js/components/articles.vue: 

<template>
    <div>
        Hello
    </div>
</template>

<script>
export default {
    name: "Articles"
}
</script>

Теперь Laravel возвращает мне ошибку:

Неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

Поскольку asset относится к public/js/app.js

, который я прочитал в этой статье Тараво Ларавел снял активы Фолера.Поэтому я добавил папку активов, и моя файловая структура выглядит следующим образом:

enter image description here

, но все же Laravel ссылается на файл public/js/app.js.

Как я могу импортировать srcipt (resources / js / app.js) в мой файл welcome.blade.php?

Редактировать:

myresources/js/app.js file: 

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

Vue.component('articles', require('./components/Articles.vue').default);

const app = new Vue({
    el: '#app'
});

Когда я изменяю сценарий с (в welcome.blade.php): 

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

на 

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

У меня естьошибка: GET http://127.0.0.1:8000/assets/js/app.js net :: ERR_ABORTED 404 (не найдено)

1 Ответ

0 голосов
/ 02 февраля 2019

Похоже, у вас есть ошибка в этой строке вашего app.js: 

Vue.component('articles', require('./components/Articles.vue').default);

Попробуйте удалить .default отсюда и посмотреть, правильно ли зарегистрирован компонент при повторной сборке (npm run dev).

Примечание: <articles> должен содержать дефис, например my-articles, v-articles или что-то еще.

При использовании компонента непосредственно в DOM (в отличие от строкового шаблона или однофайлового компонента) мы настоятельно рекомендуем следовать правилам W3C для имен пользовательских тегов (все строчные буквы должны содержать дефис).Это поможет вам избежать конфликтов с текущими и будущими элементами HTML.

https://vuejs.org/v2/guide/components-registration.html#Component-Names

...