新手小白在apache下面的二級目錄部署react/vue方法介紹
本文主要是記錄一下在apache二級目錄上面部署react和vue項目。根目錄下面部署很簡單，但是在二級目錄下就需要在webpack的配置或者vue-cli的配置文件以及路由組件做一些簡單調整。由於mac系統自己帶了apache，所以我們只需要開啟就可以了。
配置apache
在終端中輸入sudo apachectl start，然後在瀏覽器中輸入"http://localhost"，如果出現"It works!"則說明apache啟動成功。
由於mac系統在當前用戶目錄下面已經有一個Sites目錄，專門用來存放站點的文件，這裏只需要在裏面建目錄就可以了，這裏有兩個項目，一個為react項目，另一個為vue項目，IIS7-VPS大全目錄如下
|- 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方法介紹