部署Laravel到AWS时提示无法找到Mix文件/assets/css/animate.css如何解决

1. 校验编译配置与依赖引入逻辑 #

• 你当前的webpack.mix.js仅配置了app.js和app.css两个编译入口，没有将animate.css纳入编译链路，会导致mix-manifest.json中无对应文件记录，触发报错。
• 如果是在resources/css/app.css中通过@import 'animate.css'引入依赖：先确认已安装依赖npm install animate.css --save，同时确认postcss-import配置正常，引入的第三方样式会被合并到最终的app.css中，无需单独引用animate.css独立文件。
• 如果需要单独生成独立的animate.css文件，需要在webpack.mix.js中新增编译规则：

mix.postCss("resources/css/animate.css", "public/assets/css");

2. 检查本地编译产物 #

• 本地执行生产环境编译命令：npm run prod
• 编译完成后验证两处内容：
  • public/assets/css目录下是否存在animate.css文件
  • public/mix-manifest.json中是否存在/assets/css/animate.css对应的映射记录，开启mix.version()后会携带哈希后缀

注意：如果是直接放到public/assets/css下的静态文件，不要用mix()方法引用，直接用asset()方法加载即可，否则Mix会强制去manifest.json中匹配记录，找不到就会抛出异常。

3. 校验AWS部署的资源同步规则 #

• 确认你的部署流水线会将本地编译完成的public/assets目录、public/mix-manifest.json完整同步到AWS服务器的项目public目录下，很多默认部署脚本会忽略编译后的前端资源，需要手动配置同步规则。
• 如果你使用EC2部署，可以直接登录服务器验证文件是否存在：cd 项目根目录/public/assets/css && ls，同时比对服务器上的mix-manifest.json和本地编译生成的内容是否一致。

4. 检查Web服务配置 #

• 确认AWS上的Nginx/Apache配置没有对/assets/*路径做额外的拦截或重定向，标准Laravel Nginx配置需要保证静态文件存在时直接返回，不存在才走Laravel路由，对应配置片段：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

5. 校验模板资源引用写法 #

• 如果在Blade模板中使用{{ mix('/assets/css/animate.css') }}引入资源，确认路径和mix-manifest.json中的key完全一致，Linux环境大小写敏感，本地Mac/Windows环境大小写不敏感可能出现本地正常、线上报错的情况。
• 不需要做版本控制的静态资源直接修改为{{ asset('/assets/css/animate.css') }}即可。

内容的提问来源于stack exchange，提问作者May Yadanar Tun