資訊專欄INFORMATION COLUMN
摘要：本文主要是記錄一下在二級目錄上面部署和項目。根目錄下面部署很簡單，但是在二級目錄下就需要在的配置或者的配置文件以及路由組件做一些簡單調整。在目錄中新建一個文件，這里取名叫。需要清楚的是和均指向你的網站部署所在目錄。
本文主要是記錄一下在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了。
配置ReactReact項目是通過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的。這里只是一個簡單的記錄，沒有做過多的說明。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/35951.html
摘要：目前最常用的軟件反向代理服務器有和。基于實現動態代理為了實現動態代理方案，需要在反向代理服務器中增加定制的功能。同時，由于反向代理服務器需要處理大量的代理請求，因此會頻繁的讀取反向代理配置數據。 基于 Nginx 的動態代理 作者：趙波日期：2016 年 8 月 4 日 在實際應用中，遇到了這樣一個場景： 已有一個手機 APP 客戶端，需要在該 APP 客戶端中實現通過 Web 的形式...
摘要：前言本文講解的是做為前端開發人員，對服務器的了解還是小白的我，是如何一步步將項目部署在阿里云的服務器上，并進行性能優化，達到頁面秒內看到，秒內看到首屏內容的。搭建的項目是采用了主流的前后端分離思想的，這里只講服務器環境搭建與性能優化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文講解的是：做為前...
摘要：阿里巴巴出了國際版，嚴格區分了中國大陸服務器和國際服務器，兩個版本間的帳號與數據不互通的具體使用和國內版本是一樣的，創建項目就有網盤功能親測了一下速度還是非常不錯的感興趣的童鞋可以圍觀。這篇文章就用寶塔來搭建這個國際版列表程序。阿里巴巴Teambition出了國際版，Teambition嚴格區分了「中國大陸服務器」和「國際服務器」，兩個版本間的帳號與數據不互通的！ 具體使用和國內版本是...
摘要：虛擬主機域名配置服務器中有兩個不同的項目和，我們需要把頂級域名綁定到項目，將二級域名綁定到項目中。域名解析首先，在對服務器進行配置之前，先確保你的域名已經進行正確的解析。主機記錄說明要將域名解析為，在主機記錄處填寫即可。 Apache虛擬主機域名配置 服務器中有兩個不同的項目siteA和siteB，我們需要把頂級域名www.siteA.com綁定到項目siteA，將二級域名siteB....
閱讀 1635·2021-10-09 09:44
閱讀 2768·2021-10-08 10:04
閱讀 2461·2021-09-26 09:55
閱讀 3830·2021-09-22 10:02
閱讀 3303·2019-08-29 17:08
閱讀 1064·2019-08-29 15:08
閱讀 2951·2019-08-26 13:52
閱讀 3267·2019-08-26 13:34
