apache下面二级目录部署react/vue的方法
作者:jenemy 发布时间:2023-08-05 00:08:22
本文主要是记录一下在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的。这里只是一个简单的记录,没有做过多的说明。
来源:https://segmentfault.com/a/1190000016129289
猜你喜欢
- 最新消息,康盛创想(Comsenz)推出的Discuz! 7.1体验站(discuz.org)测试已经半个月,对于广大站长朋友普遍关心的新版
- 北京时间10月24日,据国外媒体报道,专门研究微软公司的独立研究机构Directions on Microsoft分析师罗布·赫尔姆(Rob
- 今天我们公司开始上班了,又投入到了紧张的工作状态中,接下来的每天都是密切的关注这搜索引擎的动静以及公司那些网站的最近情况。其实说实话,企业网
- 北京时间10月16日消息,据国外媒体报道,Mozilla昨日向微软对欧盟反垄断机构提议的“浏览器选择屏&rdqu
- HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP 协议的详细内
- 发布商都很关注收入的波动问题,今天我们就帮大家深入分析一下如何知道收入波动的背后原因,并采取相应的措施。首先,大家都知道,AdSense 收
- 一旦你精心建设好了自己的站点,就要把它发布出去。把你的Web站点提交给搜索引擎、目录和相关的站点是成功的关键。如果你用错误的方式推广自己站点
- 删除默认建立的站点的虚拟目录,停止默认web站点,删除对应的文件目录c:inetpub,配置所有站点的公共设置,设置好相关的连接数限制,带宽
- 核心提示:网站的存在就已经不是一个个人行为了,因为你面向的是一个广泛的群体,而非只是针对性的自己一个人,因此,网站的运营过程中,就必经有人加
- 如此成功的个人站长在中国站长中只能占据少数,像hao123的前主人,和广捷居的现主人,都是相对比较成功的,他们各自抓住了机遇,实现了大多数站
- 今天看到一篇文章,深有感触。做seo的时间不长,经验就比较少。希望这篇文章能帮新手解决一点小难题!很多人都在自己的SEO经验文章里提到“伪原
- 做为一个新站,没IP,没PR,没排名,新站做几天最多也就被几大搜索引擎收录,不过没什么排名。就像我昨天做的网站: * 站。这时候你应该怎么
- 每个网站都是站长的心血,都是用站长的许多个日日夜夜换来的辛勤成果。每个站都是一个不断发展的过程,有时候刚加上的新功能或新想法,下一秒就要被自
- 中新网10月10日电 今天上午,卫生部疾病预防控制局副局长孔灵芝表示,关于网瘾诊断标准的问题,我国现在正在研究之中,没有把它作为精神障碍的特
- 第一张google寄来的美元支票的时间是2004年,收到google寄来的支票了,有点出乎意料。相信许多站长都有收到第一张支票的激动,goo
- 6. 修改 advanced.acl.population 以设定管理者帐号# cd /usr/local/twig-2.7.5/setup
- 人总是愿意用挑剔的眼光来看到新生事物,在对待刀片服务器的问题就是如此,有些人对于一些反复介绍的技术视而不见,仍然强加给刀片服务器一些莫须有的
- 一、网站被将权的表现1。 被搜索引擎收录你的网站速度变慢,通常表现在快照更新时间,这点cnzhanzhang的快照就停留在7月份。2。你的网
- 今天到中国银行去取托收回来的Google$666.11美金时(比较吉利的数字^_^),银行MM小心的问到:“7.4,确定兑?”我愣了一下,马
- 华西都市报推出的榜样中国·2009年3C传媒大奖评选是一个非常有意义的活动。百度“有啊&r