MAC apache2 部署vue3的项目 备忘录

1、 确认mac自带apache服务

• vscode 安装 conf高亮显示插件便于编辑，熟悉appache 常用命令

  # 验证
  sudo apachectl configtest
  # 开启
  sudo apachectl statrt
  # 停止
  sudo apachectl stop
  # 查看VirtualHost 是否有加入到httpd.conf
  sudo apachectl -S
  

• apache2的目录位置

  # /private/etc/apache2/
  

• apache2日志位置

  # /private/var/log/apache2
  

• apache2默认web网站it works 的位置

  # /Library/WebServer/Documents
  

• 项目根路径

  lilin@lilindeMac-mini WebServer % pwd
  /Library/WebServer
  lilin@lilindeMac-mini WebServer % tree -L 2 wfweb | head -n 10
  wfweb
  ├── index.html
  └── wmusic
      ├── assets
      ├── favicon.ico
      └── index.html
    
  3 directories, 3 files
  

2、修改httpd.conf 文件的属性配置

# 这行开启可重定向
LoadModule rewrite_module libexec/apache2/mod_rewrite.so

# 这行开启虚拟机模式便于扩展
Include /private/etc/apache2/extra/httpd-vhosts.conf

# 开启方向代理需要这三个
LoadModule ssl_module libexec/apache2/mod_ssl.so
LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so

3、配置httpd-vhosts.conf

• <VirtualHost *:8081>
      ServerAdmin lilin87788@163.com
      ServerName 192.168.0.62
      DocumentRoot "/Library/WebServer/wfweb"
       <Directory "/Library/WebServer/wfweb">
          Options Indexes FollowSymLinks
          AllowOverride All
          Require all granted
      </Directory>
      # 注意这里对应的文件一定要有为了每个项目都有自己的日志文件我是以项目来区分的比如这里的wmusic
      ErrorLog "/private/var/log/apache2/wmusic/error_log"
      CustomLog "/private/var/log/apache2/wmusic/access_log" common
  </VirtualHost>
  

  • 切记这里的虚拟机器的端口号是8081 ，在httpd.conf 文件上一定也要监听这个端口号 可以监听多个

  Define SERVER_APP_HAS_DEFAULT_PORTS
  <IfDefine SERVER_APP_HAS_DEFAULT_PORTS>
      Listen 8080
      Listen 8081
  </IfDefine>
  <IfDefine !SERVER_APP_HAS_DEFAULT_PORTS>
      Listen 80
  </IfDefine>
  

3、路径重定向（httpd-vhosts.conf）

#备注我的项目vue3中的publicPath 和 vue_route 的path 都是/wmusic
#所以 项目必须放在根目录的wmusic目录下
#在httpd-vhosts.conf的节点<VirtualHost *:8081> 下面的<Directory> 中添加下面代码

 		<IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    <IfModule mod_rewrite.c>
        RewriteEngine On
        # 这里注意记得更改
        RewriteBase /wmusic/
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        # 这里注意记得更改
        RewriteRule . /wmusic/index.html [L] 
 		 </IfModule>

5、配置方向代理

    #配置反向代理 到httpd-vhosts.conf的节点<VirtualHost *:8081> 下面
    # 切记如果你的代理是https 的一定要配置成SSLProxyEngine，网上各种抄袭都是用的下面的ProxyPreserveHost
    SSLProxyEngine on
    # ProxyPreserveHost On
    ProxyPass /api https://wfapplet.wufangedu.com:9091
    ProxyPassReverse /api https://wfapplet.wufangedu.com:9091
    <Directory "/Library/WebServer/wfweb">