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的。这里只是一个简单的记录,没有做过多的说明。
以上就是本文的全部内容,希望对大家的学习有所帮助。
- 用最简单的图文带你看懂区块链
- 微信小游戏正式上线!小程序的一个类目,即点即玩!
- CentOS7安装GitLab、汉化、邮箱配置及使用
- Bootstrap源码分析之transition、affix
- Redis从单机到集群,一步步教你环境部署以及使用
- C++内存管理学习堆和栈
- 人人公司宣布收购美国卡车社区平台Trucker Path
- Mysql字符串截取总结:left()、right()、substring()、substring_index()
- c++程序的内存格局
- SpringMVC中利用@InitBinder来对页面数据进行解析绑定
- 门罗盘点:2017年那些AI击败人类的瞬间
- sizeof和strlen的区别
- mysql索引使用技巧及注意事项
- 条码支付新规,微信支付宝还好么?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python中return如何写
- PHP钩子实现方法解析
- 浅谈numpy中函数resize与reshape,ravel与flatten的区别
- PHP文件类型检查及fileinfo模块安装使用详解
- PHP封装的分页类与简单用法示例
- ThinkPHP3.2框架自带分页功能实现方法示例
- PHP获取访问设备信息的方法示例
- PHP实现微信提现功能
- PHP实现微信退款功能
- PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
- PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
- 实现php删除链表中重复的结点
- Yii2.0框架实现带分页的多条件搜索功能示例
- 定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
- PHP APP微信提现接口代码