zoukankan      html  css  js  c++  java
  • 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自:此位大佬

  • 相关阅读:
    实现Bootstrap表格拖拽
    鼠标悬停显示气泡
    JS实现当前选择日期是星期几
    JS实现双击编辑可修改
    数组累计-reduce
    vuex——action,mutation,getters的调用
    正则 二
    常用正则 一
    vuex 的使用 mapState, mapGetters, mapMutations, mapActions
    正则替换所有的 ‘ / ’
  • 原文地址:https://www.cnblogs.com/Cein/p/11081506.html
Copyright © 2011-2022 走看看