数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

来源:脚本之家  责任编辑:小易  

本文主要是记录一下在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的。这里只是一个简单的记录,没有做过多的说明。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • vue项目部署到apache服务器中遇到的问题解决
  • linux系统中安装gcc和kernel-devel的方法
  • centos 安装免费控制面板kloxo步骤
  • linux 和windows 安装git 步骤详细介绍
  • centos7中添加、删除swap交换分区的方法
  • apache下运行cgi模式的配置方法
  • 详解ubuntu 16.04 几个国内更新源
  • apache为mysql以及自己的项目设置虚拟路径
  • mac下配置和访问阿里云服务器(ubuntu系统)的图文教程
  • apache commons dbutils工具包使用介绍
  • centos下停止tomcat运行脚本代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved