Laravel Tailwind 样式无法在 Windows 10 上使用 Apache 在 XAMPP 上加载 - 如何修复 ERR_BLOCKED_BY_CLIENT？

Question

我是 Laravel 新手，我想在 Windows 10 上使用 XAMPP 中的 Apache 运行该项目。

我所做的是将项目复制到

xampp/htdocs/

，运行npm run build，然后修改

.env

文件，以及

httpd-vhosts.conf

和

httpd.conf

。

但是，当我访问该应用程序时，它会加载所有内容（登录页面、数据库），但有些内容未加载：Tailwind 样式。在控制台中，我收到错误：

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT for the following resources:
http://[::1]:5173/resources/css/app.css
http://[::1]:5173/@vite/client
http://[::1]:5173/resources/js/app.js.

在浏览网络后，我发现了许多建议删除

public/hot

文件的解决方案之一，其中包含

http://[::1]:5173

。删除后一切正常。

有更优雅的解决方案吗？

Answer 1

是的，这个问题有一个更优雅的解决方案。问题的根源在于 Laravel 的 Vite（用于捆绑 Tailwind CSS 等资产）如何针对开发和生产环境进行配置。当您运行 npm run build 时，它会生成生产就绪的资产，但仍然引用 Vite 开发服务器（为开发中的资产提供服务），从而在您尝试访问生产中的应用程序时导致问题。

以下是更干净地解决此问题的步骤：

确保您有正确的环境设置：

确保在 .env 文件中设置 APP_ENV=production。这告诉 Laravel 使用资产的生产配置。 使用 npm run prod 而不是 npm run build：

运行 npm run prod 而不是 npm run build 来为生产环境正确编译资产。这将确保 Vite 开发服务器不被引用。 生产模式下配置Vite开发服务器：

确保您的 Vite 配置（vite.config.js）已正确设置用于生产，并且它应该正确处理静态资产。 在 vite.config.js 中，添加一个条件以避免在生产中引用开发服务器。配置应该如下所示：

export default {
  build: {
    outDir: 'public/build',
  },
  server: {
    hmr: process.env.APP_ENV === 'production' ? false : { host: 'localhost' },
  },
};

清除缓存的配置：

如果您一直在开发和生产模式之间切换，您可能有一些缓存的配置。运行以下命令来清除它们：

php artisan config:clear
php artisan cache:clear
php artisan route:clear

检查您的 public/index.php 文件：

Laravel 公共文件夹中的 index.php 文件不应引用生产中的任何开发资产。确保它正确指向您的生产资产。 通过执行这些步骤，您应该不再需要手动删除公共/热门文件。一切都应该根据您的环境设置加载正确的资源。