国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 網站 > Apache > 正文

如何在apache下面的二級目錄部署react/vue

2024-08-27 18:24:02
字體:
來源:轉載
供稿:網友
  本文主要是記錄一下在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。在里面添加內容:
  <VirtualHost *:80>
  DocumentRoot /Users/你的用戶名/Sites/
  <Directory "/Users/你的用戶名/Sites/">
  Options Indexes FollowSymLinks
  AllowOverride All
  Order allow,deny
  Allow from all
  Require all granted
  </Directory>
  </VirtualHost>
  上面配置中的東西我就不作解釋了,因為我也不是很清楚。需要清楚的是DocumentRootxxx和<Directory "xxx">均指向你的網站部署所在目錄。
  配置好了記得重啟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 (
  <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]
  運行結果
  在瀏覽器中打開地址http://localhost/react即可查看react項目,http://localhost/vue來查看vue項目。本人電腦上親測是沒有問題的,訪問路由http://localhost/vue/about都ok的。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 耿马| 京山县| 商河县| 贵州省| 黄冈市| 应城市| 那坡县| 忻城县| 盐山县| 安宁市| 鄢陵县| 越西县| 曲周县| 武汉市| 两当县| 盘锦市| 阿荣旗| 彩票| 班戈县| 富宁县| 大洼县| 武陟县| 波密县| 新营市| 淮安市| 武隆县| 黑山县| 抚顺市| 新沂市| 莲花县| 界首市| 石城县| 巴林左旗| 定安县| 辉南县| 留坝县| 绥中县| 宝清县| 富蕴县| 萍乡市| 赣州市|