Laravel Vuejs Custom Css & Js файлы - PullRequest
Новая
       21

Laravel Vuejs Custom Css & Js файлы

0 голосов
/ 20 октября 2019

Я создаю приложение Laravel Vuejs с пользовательской темой и не могу загрузить файлы css и js. Нужна помощь, пожалуйста.

Итак, я сделал то же самое руководство, используя AdminLTE, и оно сработало. Поэтому я решил использовать стороннюю тему. Это шаги, которые я сделал после многих исследований:

1) Переместил все файлы активов в папку ресурсов, сохраняя оригинальную структуру папок. Исходный HTML-файл содержал: 

<link rel="stylesheet" 
href="../assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font- 
awesome.min.css">
<link rel="stylesheet" href="../assets/vendor/animate-css/vivify.min.css">
<link rel="stylesheet" href="../assets/vendor/c3/c3.min.css"/>
<link rel="stylesheet" href="../assets/vendor/bootstrap- 
datepicker/css/bootstrap-datepicker3.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="../html/assets/css/site.min.css">
......
<script src="../html/assets/bundles/libscripts.bundle.js"></script>
<script src="../html/assets/bundles/vendorscripts.bundle.js"></script>
<script src="../html/assets/bundles/c3.bundle.js"></script>
<script src="../assets/vendor/bootstrap-datepicker/js/bootstrap- 
datepicker.min.js"></script>
<script src="../html/assets/bundles/mainscripts.bundle.js"></script>
<script src="../html/assets/js/index8.js"></script>

2) В webpack.mix.js я добавил: 

mix.js('resources/js/app.js', 'public/js')
   .js([
    'resources/assets/bundles/libscripts.bundle.js',
    'resources/assets/bundles/vendorscripts.bundle.js',
    'resources/assets/bundles/c3.bundle.js',
    'resources/assets/vendor/bootstrap-datepicker/js/bootstrap- 
    datepicker.min.js',
    'resources/assets/bundles/mainscripts.bundle.js',
    'resources/assets/js/index8.js'
   ], 'public/js/all.js')
 .sass('resources/sass/app.scss', 'public/css')
 .styles([
    'resources/assets/css/vendor/bootstrap/css/bootstrap.min.css',
    'resources/assets/css/vendor/font-awesome/css/font-awesome.min.css',
    'resources/assets/css/vendor/animate-css/vivify.min.css',
    'resources/assets/css/vendor/c3/c3.min.css',
    'resources/assets/css/vendor/bootstrap-datepicker/css/bootstrap- 
     datepicker3.min.css',
     'resources/assets/css/site.min.css' 
   ], 'public/css/all.css');

3) Run npm run dev. Нет ошибокЗаменили старые файлы css и js смешанными в html-коде: 

 <link rel="stylesheet" href="/css/all.css">
 <script src="/js/all.js"></script>

4) Открыл приложение, и все, что я получил, это загрузчик, который не останавливался. Когда я удалил код счетчика из html, все, что я получил, было темой с очень испорченными css и jss.

Действительно нужна помощь с этим или, возможно, альтернативой. Заранее спасибо.

1 Ответ

0 голосов
/ 21 октября 2019

Здесь public/js/app.js отсутствует как в all.js, так и в all.css. Пожалуйста, используйте следующие коды: 

mix.js('resources/js/app.js', 'public/js')
   .js([
    'resources/assets/bundles/libscripts.bundle.js',
    'resources/assets/bundles/vendorscripts.bundle.js',
    'resources/assets/bundles/c3.bundle.js',
    'resources/assets/vendor/bootstrap-datepicker/js/bootstrap- 
    datepicker.min.js',
    'resources/assets/bundles/mainscripts.bundle.js',
    'resources/assets/js/index8.js',
    'public/js/app.js'
   ], 'public/js/all.js')
 .sass('resources/sass/app.scss', 'public/css')
 .styles([
    'resources/assets/css/vendor/bootstrap/css/bootstrap.min.css',
    'resources/assets/css/vendor/font-awesome/css/font-awesome.min.css',
    'resources/assets/css/vendor/animate-css/vivify.min.css',
    'resources/assets/css/vendor/c3/c3.min.css',
    'resources/assets/css/vendor/bootstrap-datepicker/css/bootstrap- 
     datepicker3.min.css',
     'resources/assets/css/site.min.css',
     'public/css/app.css' 
   ], 'public/css/all.css');
...