Apache部署react项目（从安装到部署完成）

目录

1.安装

1.1下载Apache

 1.2修改conf文件夹下heetd.conf(39行)   重点

 1.3 用语句httpd.exe -k install安装

2.配置文件(解决路由失效，即点击不跳转)

2.1修改conf文件夹下heetd.conf

2.2添加.htaccess文件

​编辑

2.3 配置package.json

3.打包项目

3.1改地址

3.2webpack打包

---

1.安装 1.1下载Apache

传送门：Apache Haus Downloads

解压后，我放入E盘

 1.2修改conf文件夹下heetd.conf(39行)   重点

修改为

 端口可以改为自己需要的（不改 ，端口可能已占用，无法启动）（67行）

 1.3 用语句httpd.exe -k install安装

下一步，进入bin文件，cmd以管理员方式进入，执行语句

httpd.exe -k install

 图例：（以下为成功）

 启动apache

net start Apache2.4

注：停止可用net stop Apache2.4

第一步完成。

2.配置文件(解决路由失效，即点击不跳转) 2.1修改conf文件夹下heetd.conf

167行将最前面的 # 删除

 将None改成All(可使用文件内字符查找，一共有三处)

2.2添加.htaccess文件

新建.htaccess，添加以下代码，并放入apache根目录

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

2.3 配置package.json

添加

3.打包项目 3.1改地址

将请求数据的地址改为服务器的地址

3.2webpack打包

执行

npm run build  

将生成的打包文件放入apache根目录

 重启apache

net restart Apache2.4

最后在地址栏输入服务器地址   xxx.xxx.xxx.xxx:端口号，即可访问网页。

参考文章如下：

react单页应用使用了Router 路由，部署在Apache服务器，刷新报错 404 解决_hell87的博客-CSDN博客_react部署到apache一、问题描述react单页应用使用了BrowserRouter 路由（HTML5 history API ），项目打包后，使用apache服务器访问http://www.ceshi.com/userinfo，能够正常显示，但是刷新后页面404了二、问题原因刷新页面时访问的资源在服务端找不到，因为react-router设置的路径不是真实存在的路径。如上的404现象，是因为在apach...https://blog.csdn.net/hell87/article/details/90410954Apache的安装教程_sxs7970的博客-CSDN博客_apache安装文章目录1、下载Apache2、修改 httpd.conf 文件3、启动Apache服务1、下载Apache点击：[https://www.apachehaus.com/cgi-bin/download.plx]点击图中红圈的版本下载：下载后，解压文件，把如图这两个文件拿出来放到你的Apache目录下例如：我的放到D盘,如图：2、修改 httpd.conf 文件在文件夹中查...https://blog.csdn.net/sxs7970/article/details/90349009