本文主要是记录一下在apache二级目录上面部署react和vue项目。根目录下面部署很简单，但是在二级目录下就需要在webpack的配置或者vue-cli的配置文件以及路由组件做一些简单调整。由于mac系统自己带了apache，所以我们只需要开启就可以了。

配置apache

在终端中输入sudo apachectl start，然后在浏览器中输入"http://localhost"，如果出现"It works!"则说明apache启动成功。

由于mac系统在当前用户目录下面已经有一个Sites目录，专门用来存放站点的文件，这里只需要在里面建目录就可以了，这里有两个项目，一个为react项目，另一个为vue项目，目录如下：

|- Sites| - react # react项目build后的目录| - vue # vue项目build后的目录

在终端中进入目录/etc/apache2，如果是第一次配置apache，一定要把"httpd.conf"文件和目录"extra"作个备份。接下就是编辑"httpd.conf"文件，可以选择把整个"apache2"目录拖到文本编辑中进行修改，也可以使用vim来编辑，记得使用root权限。

在配置文件中找到#ServerName localhost:80去掉"#"号，然后找到#LoadModule rewrite_module libexec/apache2/mod_rewrite.so同样去掉"#"号，然后在httpd.conf同级目录新建一个目录users来放置自己的配置文件，这里需要在apace配置中添加Include /private/etc/apache2/users/*.conf来加载自己的配置。

在users目录中新建一个文件，这里取名叫/react 。

然后是修改路由的basename值。这里使用的是"react-router 4"。

import {BrowserRouter as Router} from 'react-router-dom';function Routes() { const isProd = process.env.REACT_APP_ENV === 'production'; return ( <Router basename={isProd ? '/react' : '/'}> </Router> )}

然后public目录同样添加.htaccess文件

RewriteEngine OnRewriteCond %{REQUEST_URI} !^/index.html$RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$RewriteRule . index.html [L]

运行结果

在浏览器中打开地址http://localhost/react即可查看react项目，http://localhost/vue来查看vue项目。本人电脑上亲测是没有问题的，访问路由http://localhost/vue/about都ok的。这里只是一个简单的记录，没有做过多的说明。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。