Apache部署Vue操作手册

背景

本文介绍了如何在windows下使用apache web来部署前后端分离的应用（若依）。

1. 下载apache软件

下载地址：Apache VS17 binaries and modules download 下载时间很慢也可以在我这资源直接下载。

2. 将下载好的apache注册成服务

在cmd里以管理员的方式（必须）打开。输入下载后执行以下命令。

F:\Apache24\bin\httpd -k install -n apache

如图，有以下成功显示就安装成功了。

3. 修改配置文件

到软件目录打开conf文件夹里的httpd.conf配置文件，搜索Define SRVROOT，将这个改成你的软件安装目录，Define SRVROOT "你的目录"

改访问端口，默认80（浏览器输入localhost即可访问），改成其他端口就在这里进行修改，浏览器访问时候输入localhost：你设置端口，浏览器会显示it works。

4. 指定你放的前端打包文件

在配置文件里找个地方把这段内容放进去，这里的路径改成你前端打包文件的路径，这时候你打开服务（cmd输入services.msc）找到apache服务重启下该服务，进行重启，在浏览器里输入配置的域名就可以正常访问了。

bash 复制代码

DocumentRoot "F:/Apache24/dist"
<Directory "F:/Apache24/dist">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

5. 如果是前后端分离项目需要开启前后端转发功能

操作完记得重启服务。(也可直接使用第七步的完整配置内容，注释还是要打开的）

首选先将下面两个功能模块前面的#去掉

LoadModule proxy_module modules/mod_proxy.so

LoadModule proxy_http_module modules/mod_proxy_http.so

<VirtualHost *:80>
    # 设置字符集
    AddDefaultCharset UTF-8

    # 加入转发部分
	ProxyPass /prod-api/ http://localhost:8008/
	ProxyPassReverse /prod-api/ http://localhost:8008/

</VirtualHost>

6. 如果你刷新页面需要重定向需要开启重定向功能

操作完记得重启服务。(也可直接使用第七步的完整配置内容，注释还是要打开的）

首选先将下面功能模块前面的#去掉

LoadModule rewrite_module modules/mod_rewrite.so

    <Directory "F:/Apache24/dist">
        AllowOverride None
        Require all granted

        # 重写配置（处理单页应用的路由）
		RewriteEngine On
		RewriteBase /
		RewriteRule ^index\.html$ - [L]
		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteRule . /index.html [L]
 
    </Directory>

7. 完整的配置内容如下：

Listen 80
<VirtualHost *:80>
    # 设置字符集
    AddDefaultCharset UTF-8
	ProxyPass /prod-api/ http://localhost:8008/
	ProxyPassReverse /prod-api/ http://localhost:8008/

    # 静态文件配置
    DocumentRoot "F:/Apache24/dist"
    <Directory "F:/Apache24/dist">
        AllowOverride None
        Require all granted

        # 重写配置（处理单页应用的路由）
		RewriteEngine On
		RewriteBase /
		RewriteRule ^index\.html$ - [L]
		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteRule . /index.html [L]
 
    </Directory>


    # 错误页面配置
    ErrorDocument 500 /50x.html
    ErrorDocument 502 /50x.html
    ErrorDocument 503 /50x.html
    ErrorDocument 504 /50x.html

    # 错误页面路径
    <Directory "F:/Apache24/dist/ruoyi-ui">
        ErrorDocument 500 /50x.html
    </Directory>
</VirtualHost>