本文主要是记录一下在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来加载自己的配置。
代码语言：javascript复制在users目录中新建一个文件，这里取名叫www.example.conf。在里面添加内容：
DocumentRoot /Users/你的用户名/Sites/ Options Indexes FollowSymLinks AllowOverride All Order allow,deny Allow from all Require all granted 需要清楚的是DocumentRootxxx和均指向你的网站部署所在目录。
配置好了记得重启apache，这里是使用命令sudo apachectl -k restart。
配置Vue
代码语言：javascript复制项目是通过vue-cli 3.x生成的，在根目录新建配置文件"vue.config.js"，然后添加以下内容：
// vue.config.jsmodule.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/vue' : '/', outputDir: 'build',};这里把outputDir改成"build"是为了和react保持一致。然后找到"router.js"文件，添加一个base配置。
代码语言：javascript复制注意: 怎么把vue项目部署在二级目录，官网文档是有说明的。
export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home } })最后我们还需要在public目录中添加一个.htaccess文件来配置将所有的请求转发到静态文件index.htmlRewriteEngine OnRewriteCond %{REQUEST_URI} !^/index.htmlRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_URI} !.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)RewriteRule . /vue/index.html [L]
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：zbxhhzj@qq.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。 转载本站文章请保留原文链接，如文章内说明不允许转载该文章，请不要转载该文章，谢谢合作。
