history 模式反向代理配置

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 协议》,转载必须注明作者和本文链接