当前位置 主页 > 服务器问题 > Linux/apache问题 >

如何在apache下面的二级目录部署react/vue

栏目:Linux/apache问题 时间:2018-12-21 10:18

  本文主要是记录一下在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的。
缩小 缩小 缩小 缩小
IIS7整站下载工具 IIS7批量查询排名 IIS7远程桌面连接工具 iis7-iis网站批量管理 iis7批量替换工具 IIS7服务器专用下载工具 IIS7日志分析工具 IIS7批量PING,服务器批量添加网卡IP小工具 IIS7远程同步备份工具
IIS7网站监控 站群批量SEO查询 批量获取排名域名 批量关键词排名查询 模拟各种蜘蛛 批量友情链接监测 批量检测死链 搜索引擎大全 批量查询外链
批量查询网站标题 批量查询KeyWords 批量查询描述 批量查询网站IP 批量百度收录查询 批量查询百度日收录 批量查询百度周收录 批量查询百度月收录 批量查询360总收录 批量查询360日收录 批量查询网站年龄 批量查询360PC权重 批量查询爱站移动权重 批量查询站长移动权重 批量查询360移动权重 批量查询神马权重 批量查询谷歌PR 批量查询搜狗PR 批量查询百度反链 批量查询爱站首页反链 批量查询爱站内页反链 批量查询百度快照 批量查询搜狗快照 批量icp备案查询 批量网站ip地址查询 批量查询导出链接 批量查询百度V认证 批量查询百度安全 批量查询站长PC权重 批量查询爱站PC权重 批量查询搜狗总收录 站长资源大全 IIS7-cms大全 IIS7站群大全 IIS7虚拟空间大全 IIS7服务器大全 IIS7-VPS大全 服务器代购 站群专用 美国站群服务器 香港站群服务器 特供站群vps 亚洲服务器 菲律宾HS 韩国首尔 香港PCCW 香港沙田电信 香港PowerLine 日本多机房 新加坡多机房 韩国大带宽 香港新世界 香港Pangnet 台湾 美国服务器 加州RS 美国vps母鸡租用 洛杉矶MC 洛杉矶C3 特价促销区 洛杉矶NS 洛杉矶Cera高防 洛杉矶HS高防 SK高防 洛杉矶WX 加州RH 芝加哥AT VPS云主机 香港沙田电信 韩国首尔 香港Pangnet 新加坡SG 香港PL 洛杉矶SK 抗攻击 洛杉矶C3 日本大阪 洛杉矶Cera 抗攻击 洛杉矶MC 纽约 SSD 抗攻击 大容量备份VPS 国庆大促 俄罗斯