history 模式反向代理配置

Silent發表於2021-06-21
模式

Router 為 history 模式的 vue-cli 專案部署

1. 設定偽靜態檔案 .htaccess
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
2. 部署在apache，設定反向代理
<VirtualHost *:9001> # 前端頁面埠
    DocumentRoot "D:\phpStudy\WWW\order-sys-web\dist"  # 前端頁面目錄
    ServerName 10.4.248.18
    ServerAlias 10.4.248.18
  <Directory "D:\phpStudy\WWW\order-sys-web\dist">  # 前端頁面目錄
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
      Require all granted
  </Directory>
  <Proxy *>                                    # 新增反向代理
    Order deny,allow                           # 新增反向代理
    Allow from all                             # 新增反向代理
  </Proxy>                                     # 新增反向代理
  ProxyPass /api/ http://127.0.0.1:8001/api/ # 新增反向代理
</VirtualHost>
3. 部署在nginx，設定反向代理
server {
    # ...

    location / {  # 根據實際訪問情況配置
        proxy_pass http://127.0.0.1:8001/api  # nginx 設定反向代理
    }
}

注：hash 模式後端無需配置

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章