npm run build 中断反应路由器答案

【问题标题】：npm run build breaks react routernpm run build 中断反应路由器
【发布时间】：2018-10-26 20:14:42
【问题描述】：

我目前正在做一个 React 项目。我正在为部署设置它，因此使用“npm run build”命令构建它。

不幸的是，当我这样做并将 /build 内容提供给 apache 网络服务器（无论是在 DigitalOcean 上还是使用 XAMPP 在本地）时，所有路由都不起作用并抛出 404 not found 错误。主页运行良好，通过“npm run start command”运行项目时也运行良好

我已经尝试在网上寻找解决方案，但我还没有能够解决这个问题。

【问题讨论】：

您是否设置了后端服务器？
是的，使用 laravel。它最终成为一个 .htaccess 配置问题

标签： reactjs apache npm deployment webserver

【解决方案1】：

想分享这个，以防将来有人碰到这个问题：

这是假设使用 Ubuntu 作为操作系统：

我已经按照post from Reddit 中的某些步骤进行操作，我可以证明这可以使 SPA 在具有正确路由的 Apache Web 服务器中运行。

引用：

1) 在位于etc/apache2/ 的apache2.conf 中，我将AllowOverride 转为All。我还在文件中添加了 Servername localhost。（我不知何故跳过了最后一句话，但最后还是很好用）

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

2) 在/etc/cloud/templates 中找到的hosts.debian.tmpl 文件中，我将127.0.0.1 <yourdomain.com> 添加到其他相似ip 所在的文件中。

127.0.0.1 yourdomain.com

3) 我跑了sudo a2enmod rewrite。然后我通过service apache2 restart 重新启动了 apache 服务器。这会打开 mod_rewrite。

最后在我的项目文件夹 /var/www/html 中，除了我的 index.html 文件，我创建了一个 .htaccess 文件并添加了以下内容：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]

结束引用

假设您已运行 npm run build，然后将 build 文件夹中的所有内容复制到您的公共目录，这应该可以工作。

当我第一次开始 web 开发时，我并不确定我的 VirtualHost 配置是否正确，所以我通常会先制作一个虚拟的 index.html，例如 Hello World 示例。当我确认可以在浏览器中看到 Hello World（这意味着我的 VirtualHost 配置正确）后，我将 build 文件夹的内容转储到虚拟 index.html 所在的位置。

希望这对您现在和对我一样有帮助！

【讨论】：