前言
前面的项目都是使用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下载和使用
本地测试和服务器测试同下
-
下载好的nginx文件
-
打开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; } }
-
启动nginx
start nginx
-
结束可以在任务管理器的详细信息中结束即可