InertiaJS-Vue-Laravel项目全局CSS文件加载404问题求助

核心原因 #

Laravel的resources目录是源码目录，并非Web服务器可直接访问的公开目录，直接引用该目录下的文件会导致404错误，必须通过资源编译工具将文件发布到public目录后再引用。

具体解决方案 #

1. 检查路径与拼写 #

• 确认resources/css/app.css文件存在，文件名、目录名无拼写错误（Linux环境下区分大小写）。
• 避免直接在blade模板中引用resources目录下的文件，该目录不对外公开。

2. 使用Vite编译资源（Laravel 9+ 默认） #

• 在vite.config.js中确保CSS文件被纳入编译范围：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/app.css', 'resources/js/app.js'],
              refresh: true,
          }),
      ],
  });
  

• 运行编译命令：
  • 开发环境：npm run dev
  • 生产环境：npm run build
• 在app.blade.php中通过@vite指令引入编译后的资源：

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

3. 使用Mix编译资源（Laravel 8 及更早版本） #

• 在webpack.mix.js中添加CSS编译规则：

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

• 运行编译命令：
  • 开发环境：npm run dev
  • 生产环境：npm run prod
• 在app.blade.php中引用public目录下的编译后文件：

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

4. 临时方案（不推荐） #

直接将resources/css/app.css复制到public/css/目录，然后在模板中引用：

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

此方式无法利用编译工具的压缩、依赖管理等功能，仅适合临时测试。

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