这篇文章将为大家详细讲解有关apache下面二级目录如何部署react和vue，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
南平网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
在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目录中新建一个文件，这里取名叫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
项目是通过vue-cli 3.x生成的，在根目录新建配置文件"vue.config.js"，然后添加以下内容：
// vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/vue' : '/',
outputDir: 'build',
};这里把outputDir改成"build"是为了和react保持一致。然后找到"router.js"文件，添加一个base配置。
注意: 怎么把vue项目部署在二级目录，官网文档是有说明的。
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
}
})最后我们还需要在public目录中添加一个.htaccess文件来配置将所有的请求转发到静态文件index.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . /vue/index.html [L]这样在vue这边的准备工作就ok了。
配置React
React项目是通过create-react-app创建的，这里只需要在package.json中添加"homepage": "."，这里的homepage值也可以指定一个具体的域名，比如"homepage": http://www.example.com/react 。
然后是修改路由的basename值。这里使用的是"react-router 4"。
import {BrowserRouter as Router} from 'react-router-dom';
function Routes() {
const isProd = process.env.REACT_APP_ENV === 'production';
return (
)
}然后public目录同样添加.htaccess文件
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{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的。这里只是一个简单的记录，没有做过多的说明。
关于“apache下面二级目录如何部署react和vue”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
分享标题：apache下面二级目录如何部署react和vue
文章分享：
http://cdxtjz.com/article/ieijpd.html
