配置apache, nginx 支持 angular2+ 等单网页项目路由刷新

作者：七棵菜日期：2022-11-30 栏目：计算机分类：90 人气：607

`angular2+`的项目打包部署到服务器上之后需要重写服务器路由规则，否则在刷新页面的时候会出现`404`错误。

#### nginx的配置方法

```
location / {
  try_files $uri $uri/ /index.html;
}

# 子目录
location /xuncha-test/ {
  alias /usr/share/nginx/html/xuncha-test/;
  try_files $uri $uri/ /xuncha-test/index.html;
  index  index.html index.htm;
}
```

完整配置如下:

```
server {
    listen       80;
    server_name  admin.xindejob.localhost;
    root /data/www/xindejob/frontend/admin;
    index index.html index.htm;

#charset koi8-r;
    #access_log  /var/log/nginx/access.log  main;
    access_log off;

location / {
        try_files $uri $uri/ /index.html;
    }

location ~*  \.(?:js|css|png|jpg|jpeg|gif|ico)$ {
        expires max;
        add_header Pragma public;
        add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        log_not_found off;
        tcp_nodelay off;
        break;
    }

location ~ .*\.(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.*){
        add_header Access-Control-Allow-Origin http://game-admin.shaimobao.com;
    }

location /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://access.cultural-treasure.localhost/;
    }

}
```

#### apache的配置方法

可以在项目根目录中增加`.htaccess`文件，但是需要更改代码，有耦合，不推荐。
推荐的方法是在服务器中增加重写规则，有以下两点需要注意

> `Options`: 禁用*Indexes*和*ExecCGI*；不能禁用*FollowSymLinks*，否则会报*403*错误
`mod_rewrite`模块必须开启

重写规则有以下两种方法：

```
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
```

```
RewriteEngine On
# 如果请求的是现有资源，则按原样执行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# 如果请求的资源不存在，则使用index.html
RewriteRule ^ /index.html
```

完整配置如下：

```
<VirtualHost _default_:80>
  DocumentRoot "D:\workspace\demo\angular\base-admin\dist\full"
  ServerName full.ngx-admin.localhost
  <Directory "D:\workspace\demo\angular\base-admin\dist\full">
    Options -Indexes -ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule>
  </Directory>
  ProxyPass /api  http://seven-food.localhost/access
</VirtualHost>
```

标签： apache nginx SPA

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：git fatal: Could not read from remote repository.

随便看看

2022-11-30 配置apache, nginx 支持 angular2+ 等单网页项目路由刷新
2023-08-16 nginx配置angular项目部署在项目子目录
2022-11-30 设置 .gitignore 不忽略文件夹的规则
2022-11-30 git查看某文件最近的修改内容
2022-11-30 实现 git 切换分支后代码互不影响

配置apache, nginx 支持 angular2+ 等单网页项目路由刷新

随便看看

留言