apache支持VUE项目

缘起

公司项目已经经历过N年的历史. 原架构中通过apache做正向代理. 因项目项目历史悠久,前后台都糅合在一个项目中. 在今年新作的页面通过VUE做前台页面渲染, 后端还是用原来的接口服务. 实现前后端分离, 因服务器资源有限, 所以只能把前端代码部署到apache中.

想要实现效果.

1. apache原来根目录的项目没有影响. 例如: www.abc.com
2. 新项目在apache根目录新建个子项目(子目录)能正常运行. www.abc.com/newproject/
3. 本例主要使用apache的rewrite模块.
   约定: 假设apache项目默认部署根目录为/var/www/html; 新项目部署路径 /var/www/html/a/b/h5/

apache服务器修改

1. http.conf

• 启用 mod_rewrite 模块
  查找 http.conf文件. 找到 mod_rewrite 将前面的#去掉.

LoadModule rewrite_module modules/mod_rewrite.so

• 修改 AllowOverride 属性.
  因新项目文件夹会放置到/var/www/html 所以修改 <Directory “/var/www/html”> 和 <Directory “/”> 下面的 AllowOverride 属性, 将 None改为 All

AllowOverride All

2. VirtualHost修改.

• 修改代理匹配规则. 让页面或者资源文件都走apache代理
  ProxyPassMatch ^(/a/b/h5/.*)$ !
• 配置页面调用接口反向代理

ProxyPass /a/  balancer://cluster/
 ProxyPassReverse /a/  balancer://cluster/
 <Proxy balancer://cluster/>
  BalancerMember http://192.168.1.100:8080/a loadfactor=1
 </Proxy>

vue项目修改

创建.htaccess文件.
在项目根目录(index.html相同目录)创建文件名为.htaccess的文件. 文件内容为

<IfModule mod_rewrite.c>
	  RewriteEngine On
	  RewriteBase /
	  RewriteRule ^index\.html$ - [L]
	  RewriteCond %{REQUEST_FILENAME} !-f
	  RewriteCond %{REQUEST_FILENAME} !-d
	  RewriteRule . /a/b/h5/index.html [L]
</IfModule>

说明: VUE官网推荐配置方式为如下, 但是不起作用.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这样在浏览器输入 http://apache服务器地址:端口号/a/b/h5/ 就可以访问了