本文主要是記錄一下在apache二級(jí)目錄上面部署react和vue項(xiàng)目。根目錄下面部署很簡(jiǎn)單，但是在二級(jí)目錄下就需要在webpack的配置或者vue-cli的配置文件以及路由組件做一些簡(jiǎn)單調(diào)整。由于mac系統(tǒng)自己帶了apache，所以我們只需要開(kāi)啟就可以了。

配置apache

在終端中輸入sudo apachectl start，然后在瀏覽器中輸入"http://localhost"，如果出現(xiàn)"It works!"則說(shuō)明apache啟動(dòng)成功。

由于mac系統(tǒng)在當(dāng)前用戶目錄下面已經(jīng)有一個(gè)Sites目錄，專門(mén)用來(lái)存放站點(diǎn)的文件，這里只需要在里面建目錄就可以了，這里有兩個(gè)項(xiàng)目，一個(gè)為react項(xiàng)目，另一個(gè)為vue項(xiàng)目，目錄如下：

|- Sites| - react # react項(xiàng)目build后的目錄| - vue # vue項(xiàng)目build后的目錄

在終端中進(jìn)入目錄/etc/apache2，如果是第一次配置apache，一定要把"httpd.conf"文件和目錄"extra"作個(gè)備份。接下就是編輯"httpd.conf"文件，可以選擇把整個(gè)"apache2"目錄拖到文本編輯中進(jìn)行修改，也可以使用vim來(lái)編輯，記得使用root權(quán)限。

在配置文件中找到#ServerName localhost:80去掉"#"號(hào)，然后找到#LoadModule rewrite_module libexec/apache2/mod_rewrite.so同樣去掉"#"號(hào)，然后在httpd.conf同級(jí)目錄新建一個(gè)目錄users來(lái)放置自己的配置文件，這里需要在apace配置中添加Include /private/etc/apache2/users/*.conf來(lái)加載自己的配置。

在users目錄中新建一個(gè)文件，這里取名叫www.example.conf。在里面添加內(nèi)容：

<VirtualHost *:80> DocumentRoot /Users/你的用戶名/Sites/ <Directory "/Users/你的用戶名/Sites/"> Options Indexes FollowSymLinks AllowOverride All Order allow,deny Allow from all Require all granted </Directory></VirtualHost>

上面配置中的東西我就不作解釋了，因?yàn)槲乙膊皇呛芮宄?。需要清楚的?code style="margin: 3px auto 0px; padding: 2px 4px; outline: none; font-style: inherit; font-weight: inherit; background: rgb(249, 242, 244); width: 640px; line-height: 1.5; clear: both; font-size: 12px; border: 1px solid rgb(204, 204, 204); color: rgb(199, 37, 78); border-radius: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;">DocumentRootxxx和<Directory "xxx">均指向你的網(wǎng)站部署所在目錄。

配置好了記得重啟apache，我這里是使用命令sudo apachectl -k restart。

配置Vue

項(xiàng)目是通過(guò)vue-cli 3.x生成的，在根目錄新建配置文件"vue.config.js"，然后添加以下內(nèi)容：

// vue.config.jsmodule.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/vue' : '/', outputDir: 'build',};

這里把outputDir改成"build"是為了和react保持一致。然后找到"router.js"文件，添加一個(gè)base配置。

注意: 怎么把vue項(xiàng)目部署在二級(jí)目錄，官網(wǎng)文檔是有說(shuō)明的。

export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ {  path: '/',  name: 'home',  component: Home } })

最后我們還需要在public目錄中添加一個(gè).htaccess文件來(lái)配置將所有的請(qǐng)求轉(zhuǎn)發(fā)到靜態(tài)文件index.html

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 . /vue/index.html [L]

這樣在vue這邊的準(zhǔn)備工作就ok了。

配置React

React項(xiàng)目是通過(guò)create-react-app創(chuàng)建的，這里只需要在package.json中添加"homepage": "."，這里的homepage值也可以指定一個(gè)具體的域名，比如"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 ( <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]

運(yùn)行結(jié)果

在瀏覽器中打開(kāi)地址http://localhost/react即可查看react項(xiàng)目，http://localhost/vue來(lái)查看vue項(xiàng)目。本人電腦上親測(cè)是沒(méi)有問(wèn)題的，訪問(wèn)路由http://localhost/vue/about都o(jì)k的。這里只是一個(gè)簡(jiǎn)單的記錄，沒(méi)有做過(guò)多的說(shuō)明。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。