0

подскажите пожалуйста как мне правильно подключать js в laravel? Раньше код был в одном файле app.js. Начал делать сортировку js кода по отдельным файлам.. как правильно подключать js файлы? в webpack каждый js файл? или как сейчас созданные файлы просто подключать в app.js?

введите сюда описание изображения

webpack

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

mix
    .setPublicPath('public/build')
    .setResourceRoot('/build/')
    .js('resources/js/app.js', 'js')
    .sass('resources/sass/app.scss', 'css')
    .version();

app.js

require('./bootstrap');
require('./public/advert/show/showMap');
require('./public/advert/create/uploadImagePreview');

import CategoryManager from './public/advert/create/categoryManager';

window.Vue = require('vue');

Vue.component('autocomplete-region-component', require('./components/AutocompleteRegionComponent.vue').default);

new CategoryManager();

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

vue

<template>
    <div>
        <input                
            value=""
        >
        <input                
            value="enteredRegion">
        <div class="panel-footer" v-if="results.length">
            <ul class="list-group select-region">
                <li class="list-group-item list-region" v-for="result in results" v-on:click="selectRegion(result)">
                    {{ result.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                query: '',
                results: [],
            }
        },
        methods: {
            autoComplete(){
                this.results = [];
                if(this.query.length > 2){
                    axios.get('/api/regions',{params: {_limit: 2, query: this.query}}).then(response => {
                        this.results = response.data;
                    });
                }
            },
            selectRegion(result){
                let inputWithRegionName = document.querySelector('.js-region-name');
                let inputWithRegionId = document.querySelector('.js-region-id');
                let listRegions = document.querySelector('.panel-footer');

                inputWithRegionName.value = result.name;
                inputWithRegionId.value = result.id;
                listRegions.hidden = true;
            }
        }
    }
</script>

P.S Сейчас наблюдается такая проблема например захожу на эту страницу все ок

введите сюда описание изображения

перехожу на другую страницу и в консоль сыпятся разные ошибки. Данная страница не должна вообще ничего знать о js который в ошибках

введите сюда описание изображения

1 ответ 1

1

Даже если вы сделали сортировку js файлов все равно у вас должно быть один файл которое подключает всех остальных.app.js

Советую написать так.

Один файл app.js (который создал Laravel) которое подключает ваш основной файл index.js.

Папка js внутри папки resources

  • components (папка)
  • containers (папка)
  • app.js
  • index.js

В app.js не должно быть много логики только подключаемые файлы

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component 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.
 */

require('./index');

Конфигурация laravel mix следующая (для react-a) для vue смотрите тут

mix.react('resources/js/app.js', 'public/js');

И наконец внутри welcome.blade.php в вашем основном view подключаете свои скрипты

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
5
  • подскажите, а для чего еще один файл плодить index.js? для будущего удобства когда будет больше файлов js?
    – Vlad
    25 апр 2020 в 15:38
  • или в index.js только фалы проекта?
    – Vlad
    25 апр 2020 в 15:47
  • @Vlad да и с точки зрения удобства и с точки зрения того чтобы все не писать внутри app лишняю логику.
    – Randall
    25 апр 2020 в 16:09
  • ок спасибо! А можете подсказать по ошибкам в консоле?
    – Vlad
    25 апр 2020 в 16:14
  • 1
    @Vlad у вас элемент (по идентификатору) app не найден и много других ошибок с которых можно сделать вывод что либо чего то не подключили либо подключили не правильно.Я думаю вам надо смотреть в файл где есть элемент #app .Скорее всего проблема там.
    – Randall
    25 апр 2020 в 16:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.