!
也想出现在这里? 联系我们
广告位
当前位置:首页>教程分享>服务器教程>Apache二级目录部署react/vue教程

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。在里面添加内容:
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.jsmodule.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 OnRewriteCond %{REQUEST_URI} !^/index.html$RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_URI} !\\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$RewriteRule . /vue/index.html [L]

给TA打赏
共{{data.count}}人
人已打赏
服务器教程

Ubuntu 18.04安装Atom以及中文版设置

2021-4-17 19:10:13

服务器教程

Windows系统防火墙启用需要注意的细节

2021-4-17 19:10:15

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:吉吉国王 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
OneEase