Laravel Vuejs 自定义 Css & Js 文件

Question

我正在使用自定义主题创建 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) 运行 npm run dev。没有错误。用html代码中的混合文件替换了旧的css和js文件：

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

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

在这方面确实需要帮助，或者可能需要替代方法。提前致谢。

Answer 1

all.js 和 all.css 中缺少 public/js/app.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/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');