javascript - Laravel Vuejs 自定义 Css 和 Js 文件

Question

我正在创建一个带有自定义主题的 Laravel Vuejs 应用程序，但无法加载 css 和 js 文件。请需要一些帮助。

因此，我使用 AdminLTE 完成了相同的教程并且成功了。所以我决定使用第三方主题。这些是我经过大量研究后所做的步骤:

1) 将所有 Assets 文件移动到保持原始文件夹结构的资源文件夹中。原始 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) 运行 npm run dev。没有错误。将旧的 css 和 js 文件替换为 html 代码中的混合文件:

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

4) 打开应用程序，我得到的只是不会停止的加载微调器。当我从 html 中删除微调器代码时，我得到的只是带有非常破损的 css 和 jss 的主题。

确实需要这方面的帮助或替代方案。提前致谢。

Answer 1

此处 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');