Laravel 6中如何引入自定义JavaScript和CSS文件

嘿，我刚好用过Laravel 6，这个问题我太懂了！你遇到的404问题，核心原因是Laravel 6默认用Laravel Mix来管理前端资源，resources目录下的文件是源码文件，不会直接被Web服务器访问到——只有经过Mix编译后输出到public目录的文件，才能用asset()函数正常调用。

下面是一步步解决的方法：

1. 配置Laravel Mix编译规则 #

首先打开项目根目录下的webpack.mix.js，这是Mix的配置文件，我们需要在这里添加自定义文件的编译指令：

• 如果你的自定义JS是resources/js/script.js，添加一行：

  mix.js('resources/js/script.js', 'public/js');
  

• 如果你的自定义CSS是resources/sass/style.css，添加一行（如果是.scss文件就用mix.sass）：

  mix.css('resources/sass/style.css', 'public/css');
  

  最终的webpack.mix.js大概长这样：

  const mix = require('laravel-mix');
  
  mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
     // 新增的自定义文件编译规则
     .js('resources/js/script.js', 'public/js')
     .css('resources/sass/style.css', 'public/css');
  

2. 编译前端资源 #

配置好之后，打开终端，在项目根目录运行编译命令：

• 开发环境（编译速度快，带源码映射，方便调试）：

  npm run dev
  

• 如果需要实时监听文件变化、自动重新编译：

  npm run watch
  

• 生产环境（输出压缩优化后的文件）：

  npm run prod
  

  运行完成后，你会在public/js下看到编译好的script.js，public/css下看到style.css。

3. 在Blade模板中正确引用 #

现在就可以用asset()指向public目录下的编译文件了：

<!-- 引入自定义JS -->
<script src="{{ asset('js/script.js') }}"></script>
<!-- 引入自定义CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet">

另外，你之前调用的asset('js/app.js')也会404，因为默认的app.js同样需要编译——运行上面的编译命令后，public/js/app.js就会生成，这时候再引用就没问题了。

额外提醒 #

• 如果你的自定义样式是Sass/SCSS文件，记得把mix.css改成mix.sass，Mix会自动把Sass语法编译成标准CSS。
• 确保你已经安装了Node.js和npm，不然无法运行编译命令（如果没安装，先安装Node.js，然后在项目根目录运行npm install安装依赖）。

内容的提问来源于stack exchange，提问作者Amaobi Victor