angular7项目使用nginx部署并使用H5(无#)history模式

前言

前面的项目都是使用hash模式，即带#来访问的。
不同模式（h5 history 和 hash #）两种模式之间的切换，在angular中做如下配置即可：
index.html

<base href="/">

app.module.ts

import { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';

providers: [
    // { provide: LocationStrategy, useClass: HashLocationStrategy } // hash模式
    {provide: LocationStrategy, useClass: PathLocationStrategy} // 无#及h5 history模式
],

hash模式使用

在默认通过使用hash模式发布网站之后，效果如下：

这种模式就是不好看，并且seo方面也有问题。其他没什么大的问题，部署之后刷新也没问题。

H5 history模式

在使用无哈希，即使用history模式的时候，只需要更改app.module.ts中的配置即可。
但是发布之后会存在刷新404问题。所以就需要使用nginx来解决。

ngnix下载和使用

点击查看

本地测试和服务器测试同下

1. 下载好的nginx文件
   

2. 打开conf/nginx.conf文件做如下配置

   http {
       include       mime.types;
       default_type  application/octet-stream;
   
       #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
       #                  '$status $body_bytes_sent "$http_referer" '
       #                  '"$http_user_agent" "$http_x_forwarded_for"';
   
       #access_log  logs/access.log  main;
   
       sendfile        on;
       #tcp_nopush     on;
   
       #keepalive_timeout  0;
       keepalive_timeout  65;
   
       #gzip  on;
   
       server {				# 操作点
           listen       8888;		 # 监听的端口
           server_name  localhost; 		# 服务器名称
   
           #charset koi8-r;
   
           #access_log  logs/host.access.log  main;
   
           location / {
               root   D:\网站发布\official-website;		# 静态资源的地址
               try_files $uri $uri/ /index.html;   # #try_files先寻找名为 $uri 文件，没有则寻找 $uri/ 文件，再没有就寻找/index.html
           }
   
           #error_page  404              /404.html;
   
           # redirect server error pages to the static page /50x.html
           #
           error_page   500 502 503 504  /50x.html;
           location = /50x.html {
               root   html;
       }
   }
   

3. 启动nginx

   start nginx
   

4. 结束可以在任务管理器的详细信息中结束即可

效果