Laravel使用Laravel Mix安装Font Awesome生产环境图标不显示求助

解决步骤 #

• 首先确认生产环境public目录下存在webfonts文件夹
  你配置中设置了将fontawesome字体文件复制到public/webfonts，先核实npm run prod生成的该文件夹已经完整同步到生产环境的部署目录，遗漏上传该文件夹是最常见的故障原因。
• 修正sass文件中的字体路径配置
  打开resources/sass/app.scss，在导入fontawesome样式前添加路径配置，示例如下：

  $fa-font-path: '/webfonts';
  @import '~@fortawesome/fontawesome-free/scss/fontawesome';
  @import '~@fortawesome/fontawesome-free/scss/solid';
  @import '~@fortawesome/fontawesome-free/scss/regular';
  @import '~@fortawesome/fontawesome-free/scss/brands';
  

  生产环境编译时如果没有正确指定该路径，css会加载错误位置的字体文件，导致图标无法显示。
• 调整webpack配置与静态资源引入方式
  1. 修改webpack.mix.js的版本哈希配置，无需指定单独文件，自动对所有编译资源生成哈希：

  mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .copy(
        'node_modules/@fortawesome/fontawesome-free/webfonts',
        'public/webfonts'
    )
    .sourceMaps()
    .version();
  

  2. 确认blade模板中引入css时使用mix()辅助函数，而非直接写静态路径：

  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  

• 清理缓存后重试
  部署完成后执行以下命令清理Laravel缓存：

  php artisan cache:clear
  php artisan view:clear
  php artisan config:clear
  

  同时清理浏览器缓存或用隐私模式访问测试，避免旧css缓存影响。

内容的提问来源于stack exchange，提问作者tor daniel