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

女爷i 2024-04-17 14:09 19阅读 0赞

#### 前言 ####

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

app.module.ts

import { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';
    
    providers: [
        // { provide: LocationStrategy, useClass: HashLocationStrategy } // hash模式
        {provide: LocationStrategy, useClass: PathLocationStrategy} // 无#及h5 history模式
    ],

#### hash模式使用 ####

在默认通过使用hash模式发布网站之后，效果如下：  
![在这里插入图片描述][20190827105945270.png]  
这种模式就是不好看，并且seo方面也有问题。其他没什么大的问题，部署之后刷新也没问题。

#### H5 history模式 ####

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

#### ngnix下载和使用 ####

[点击查看][Link 1]

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

1.  下载好的nginx文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]
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.  结束可以在任务管理器的详细信息中结束即可

#### 效果 ####

![在这里插入图片描述][20190827110743688.png]

[20190827105945270.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/997a349ee24b452a8a1f995bb924d0df.png
[Link 1]: https://blog.csdn.net/yw00yw/article/details/87375180
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/74df9edc72ae45619b400571d46135d4.png
[20190827110743688.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a652feb377584e7a83bc5eb6d76bab26.png