Laravel Mix React项目部署Hostinger共享主机后组件不显示求助

部署Laravel Mix React项目到Hostinger共享主机后，服务器能正常加载index文件，但Blade模板中的React组件无法渲染。通过网络检查发现，React组件对应的JS文件未从服务器返回。本地环境下，关联Blade的JS文件渲染React组件正常，yarn watch也无异常，部署前已执行yarn prod和php artisan config:cache命令。

项目配置文件（webpack.mix.js） #

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/articleCreate.js', 'public/js').react();
mix.js('resources/js/articleLike.js', 'public/js').react();
mix.js('resources/js/statistics.js', 'public/js').react();

排查与解决步骤 #

• 确认JS文件的部署状态
  检查本地执行yarn prod后生成的JS文件（如public/js/articleCreate.js）是否完整上传到Hostinger服务器的对应目录。Hostinger共享主机的Laravel项目通常部署在public_html下，需确保public_html/js/目录存在目标文件，且文件权限设为644、目录权限设为755，保证服务器可读取这些文件。

• 验证Blade中的JS引用路径
  Blade模板中必须使用Laravel辅助函数生成正确的资源URL，示例：

  <script src="{{ asset('js/articleCreate.js') }}"></script>
  

  避免使用相对路径，防止路由层级导致路径错误。同时可直接在浏览器地址栏访问该JS的完整URL（如https://你的域名.com/js/articleCreate.js），若返回404则说明路径或文件存在问题。

• 清理缓存
  执行以下命令清除Laravel各类缓存：

  php artisan cache:clear
  php artisan view:clear
  php artisan route:clear
  

  同时强制刷新浏览器缓存（Ctrl+F5），避免浏览器加载旧缓存资源。

• 检查Hostinger上传限制
  确认编译后的JS文件未超过Hostinger的文件大小限制，且上传过程无中断导致文件损坏。可尝试重新上传public/js目录下的所有文件，或通过Hostinger文件管理器上传压缩包后解压。

• 核对Mix版本与编译结果
  确保本地与服务器的Laravel Mix版本一致，避免版本差异导致编译文件不兼容。重新在本地执行yarn prod，查看编译过程是否有警告或错误，确保生成的JS文件无语法问题。

内容的提问来源于stack exchange，提问作者Nay Aung Lin