Laravel调用asset()函数引入CSS资源返回404错误该如何解决？

• Laravel 中 asset() 助手函数的根路径对应项目的 public 目录，只有存放在该目录下的资源才能被外部URL直接访问。你将app.css存放在resources/css目录下，该目录属于非公开的源码目录，默认不允许外部访问，因此访问对应URL会返回404。

根据你使用的打包工具不同，可选择对应方案：

• Laravel 9+ 自带Vite工具（官方推荐）
  不需要手动使用asset()引入资源，直接替换原有链接代码为Blade指令即可：

  @vite('resources/css/app.css')
  

  Vite会自动处理开发环境的资源代理和生产环境的编译打包，自动生成正确的访问路径。
• 不需要编译，直接使用原生CSS
  直接将resources/css/app.css文件复制到public/css/app.css路径下，原有asset('css/app.css')的引入代码无需修改即可正常访问。
• Laravel 8及更早版本自带Laravel Mix工具
  首先确认项目根目录下webpack.mix.js中存在如下配置：

  mix.css('resources/css/app.css', 'css')
  

  之后在项目根目录终端执行命令完成资源编译：

  # 开发环境编译
  npm run dev
  # 生产环境编译压缩
  npm run prod
  

  执行完成后Mix会自动将编译后的CSS文件输出到public/css/app.css路径，原有引入代码即可正常生效。

提示：不要为了访问资源将resources目录配置为公开可访问，会导致项目源码、配置文件泄露，存在严重安全风险。

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