您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)apache下面二級目錄如何部署react和vue,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
在apache二級目錄上面部署react和vue項(xiàng)目。根目錄下面部署很簡單,但是在二級目錄下就需要在webpack的配置或者vue-cli的配置文件以及路由組件做一些簡單調(diào)整。由于mac系統(tǒng)自己帶了apache,所以我們只需要開啟就可以了。
配置apache
在終端中輸入sudo apachectl start,然后在瀏覽器中輸入"http://localhost",如果出現(xiàn)"It works!"則說明apache啟動成功。
由于mac系統(tǒng)在當(dāng)前用戶目錄下面已經(jīng)有一個Sites目錄,專門用來存放站點(diǎn)的文件,這里只需要在里面建目錄就可以了,這里有兩個項(xiàng)目,一個為react項(xiàng)目,另一個為vue項(xiàng)目,目錄如下:
|- Sites | - react # react項(xiàng)目build后的目錄 | - vue # vue項(xiàng)目build后的目錄
在終端中進(jìn)入目錄/etc/apache2
,如果是第一次配置apache,一定要把"httpd.conf"文件和目錄"extra"作個備份。接下就是編輯"httpd.conf"文件,可以選擇把整個"apache2"目錄拖到文本編輯中進(jìn)行修改,也可以使用vim來編輯,記得使用root權(quán)限。
在配置文件中找到#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。在里面添加內(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>DocumentRootxxx和<Directory "xxx">
均指向你的網(wǎng)站部署所在目錄。
配置好了記得重啟apache,我這里是使用命令sudo apachectl -k restart
。
配置Vue
項(xiàng)目是通過vue-cli 3.x生成的,在根目錄新建配置文件"vue.config.js",然后添加以下內(nèi)容:
// vue.config.js module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/vue' : '/', outputDir: 'build', };
這里把outputDir
改成"build"是為了和react保持一致。然后找到"router.js"文件,添加一個base配置。
注意: 怎么把vue項(xiàng)目部署在二級目錄,官網(wǎng)文檔是有說明的。
export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home } })
最后我們還需要在public
目錄中添加一個.htaccess
文件來配置將所有的請求轉(zhuǎn)發(fā)到靜態(tài)文件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這邊的準(zhǔn)備工作就ok了。
配置React
React項(xiàng)目是通過create-react-app創(chuàng)建的,這里只需要在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 ( <Router basename={isProd ? '/react' : '/'}> </Router> ) }
然后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]
運(yùn)行結(jié)果
在瀏覽器中打開地址http://localhost/react即可查看react項(xiàng)目,http://localhost/vue來查看vue項(xiàng)目。本人電腦上親測是沒有問題的,訪問路由http://localhost/vue/about都o(jì)k的。這里只是一個簡單的記錄,沒有做過多的說明。
關(guān)于“apache下面二級目錄如何部署react和vue”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。