成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

apache下面二級目錄部署react/vue

chaos_G / 1942人閱讀

摘要：本文主要是記錄一下在二級目錄上面部署和項(xiàng)目。根目錄下面部署很簡單，但是在二級目錄下就需要在的配置或者的配置文件以及路由組件做一些簡單調(diào)整。在目錄中新建一個(gè)文件，這里取名叫。需要清楚的是和均指向你的網(wǎng)站部署所在目錄。

本文主要是記錄一下在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)有一個(gè)Sites目錄，專門用來存放站點(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來編輯，記得使用root權(quán)限。

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

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


  DocumentRoot /Users/你的用戶名/Sites/
  
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted

上面配置中的東西我就不作解釋了，因?yàn)槲乙膊皇呛芮宄?。需要清楚的?b>DocumentRootxxx和均指向你的網(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"文件，添加一個(gè)base配置。

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

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

最后我們還需要在public目錄中添加一個(gè).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值也可以指定一個(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 (
    
    
  )
}

然后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的。這里只是一個(gè)簡單的記錄，沒有做過多的說明。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/35951.html

相關(guān)文章

  • 基于 Nginx 的動態(tài)代理

    摘要：目前最常用的軟件反向代理服務(wù)器有和?；趯?shí)現(xiàn)動態(tài)代理為了實(shí)現(xiàn)動態(tài)代理方案，需要在反向代理服務(wù)器中增加定制的功能。同時(shí)，由于反向代理服務(wù)器需要處理大量的代理請求，因此會頻繁的讀取反向代理配置數(shù)據(jù)。 基于 Nginx 的動態(tài)代理 作者：趙波日期：2016 年 8 月 4 日 在實(shí)際應(yīng)用中，遇到了這樣一個(gè)場景： 已有一個(gè)手機(jī) APP 客戶端，需要在該 APP 客戶端中實(shí)現(xiàn)通過 Web 的形式...

    wean 評論0 收藏0

  • 服務(wù)器小白的我,是如何成功將 node+mongodb 項(xiàng)目部署在服務(wù)器上并進(jìn)行性能優(yōu)化的

    摘要：前言本文講解的是做為前端開發(fā)人員，對服務(wù)器的了解還是小白的我，是如何一步步將項(xiàng)目部署在阿里云的服務(wù)器上，并進(jìn)行性能優(yōu)化，達(dá)到頁面秒內(nèi)看到，秒內(nèi)看到首屏內(nèi)容的。搭建的項(xiàng)目是采用了主流的前后端分離思想的，這里只講服務(wù)器環(huán)境搭建與性能優(yōu)化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文講解的是：做為前...

    zsy888 評論0 收藏0

  • 寶塔面板安裝Teambition國際版列表程序

    摘要：阿里巴巴出了國際版，嚴(yán)格區(qū)分了中國大陸服務(wù)器和國際服務(wù)器，兩個(gè)版本間的帳號與數(shù)據(jù)不互通的具體使用和國內(nèi)版本是一樣的，創(chuàng)建項(xiàng)目就有網(wǎng)盤功能親測了一下速度還是非常不錯(cuò)的感興趣的童鞋可以圍觀。這篇文章就用寶塔來搭建這個(gè)國際版列表程序。阿里巴巴Teambition出了國際版，Teambition嚴(yán)格區(qū)分了「中國大陸服務(wù)器」和「國際服務(wù)器」，兩個(gè)版本間的帳號與數(shù)據(jù)不互通的！ 具體使用和國內(nèi)版本是...

    cnsworder 評論0 收藏0

  • Apache虛擬主機(jī)域名配置

    摘要：虛擬主機(jī)域名配置服務(wù)器中有兩個(gè)不同的項(xiàng)目和，我們需要把頂級域名綁定到項(xiàng)目，將二級域名綁定到項(xiàng)目中。域名解析首先，在對服務(wù)器進(jìn)行配置之前，先確保你的域名已經(jīng)進(jìn)行正確的解析。主機(jī)記錄說明要將域名解析為，在主機(jī)記錄處填寫即可。 Apache虛擬主機(jī)域名配置 服務(wù)器中有兩個(gè)不同的項(xiàng)目siteA和siteB，我們需要把頂級域名www.siteA.com綁定到項(xiàng)目siteA，將二級域名siteB....

    everfight 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<