apache下面二级目录部署react/vue

chaos_G 发布于2019-07-24 10:47 / 1867人阅读

摘要：本文主要是记录一下在二级目录上面部署和项目。根目录下面部署很简单，但是在二级目录下就需要在的配置或者的配置文件以及路由组件做一些简单调整。在目录中新建一个文件，这里取名叫。需要清楚的是和均指向你的网站部署所在目录。

本文主要是记录一下在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了。

配置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 (
    
    
  )
}

然后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的。这里只是一个简单的记录，没有做过多的说明。

GPU云服务器云服务器 apache目录 apache 访问目录 apache 默认目录 apache 目录浏览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/35951.html

基于 Nginx 的动态代理

摘要：目前最常用的软件反向代理服务器有和。基于实现动态代理为了实现动态代理方案，需要在反向代理服务器中增加定制的功能。同时，由于反向代理服务器需要处理大量的代理请求，因此会频繁的读取反向代理配置数据。基于 Nginx 的动态代理作者：赵波日期：2016 年 8 月 4 日在实际应用中，遇到了这样一个场景：已有一个手机 APP 客户端，需要在该 APP 客户端中实现通过 Web 的形式...

wean 2019-07-25 13:47 评论0 收藏0
服务器小白的我,是如何成功将 node+mongodb 项目部署在服务器上并进行性能优化的

摘要：前言本文讲解的是做为前端开发人员，对服务器的了解还是小白的我，是如何一步步将项目部署在阿里云的服务器上，并进行性能优化，达到页面秒内看到，秒内看到首屏内容的。搭建的项目是采用了主流的前后端分离思想的，这里只讲服务器环境搭建与性能优化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言本文讲解的是：做为前...

zsy888 2019-06-26 17:54 评论0 收藏0
宝塔面板安装Teambition国际版列表程序

摘要：阿里巴巴出了国际版，严格区分了中国大陆服务器和国际服务器，两个版本间的帐号与数据不互通的具体使用和国内版本是一样的，创建项目就有网盘功能亲测了一下速度还是非常不错的感兴趣的童鞋可以围观。这篇文章就用宝塔来搭建这个国际版列表程序。阿里巴巴Teambition出了国际版，Teambition严格区分了「中国大陆服务器」和「国际服务器」，两个版本间的帐号与数据不互通的！具体使用和国内版本是...

cnsworder 2021-08-31 14:28 评论0 收藏0
Apache虚拟主机域名配置

摘要：虚拟主机域名配置服务器中有两个不同的项目和，我们需要把顶级域名绑定到项目，将二级域名绑定到项目中。域名解析首先，在对服务器进行配置之前，先确保你的域名已经进行正确的解析。主机记录说明要将域名解析为，在主机记录处填写即可。 Apache虚拟主机域名配置服务器中有两个不同的项目siteA和siteB，我们需要把顶级域名www.siteA.com绑定到项目siteA，将二级域名siteB....

everfight 2019-07-24 10:41 评论0 收藏0