Angular 项目打包之后,部署到服务器,刷新访问404解决方法

将前端代码打包部署到服务器中,当跳转到相应路由界面,刷新地址,服务找不到地址页面,所以会报 404 - Page Not Found。

解决方法:只需要将路由转换成哈希值: userHash: true,将路由转化成“#”号的形式

以下两种方式修改路由,使用hash:

1、sys-routing.module.ts

imports: [
    RouterModule.forRoot(routers, {useHash: true})
]

2. app.module.ts文件添加两行代码:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';
@NgModule({
 
    providers: [
 
    { provide: LocationStrategy, useClass: HashLocationStrategy },
 
    ]
 
})

3.因为后台是基于.net core,发布于iis,故添加web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息,请访问
  http://go.microsoft.com/fwlink/?LinkId=301880
  -->
<configuration>

  <system.webServer>
     <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
  </system.webServer>

</configuration>

个人使用3完成

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

非asp.net 个人推荐 2 原文Copy自:此位大佬