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自:此位大佬

  • 相关阅读:
    xmind等工具下载
    remix使用经验积累
    visual studio code下载地址
    以太坊存储类型(memory,storage)及变量存储详解
    remix共享本地文件夹教程
    在remix恢复已部署的合约步骤
    ERC721 相关语法和知识点学习
    用truffle写测试用例
    truffle环境搭建和应用
    jenkins pipeline基础语法与示例
  • 原文地址:https://www.cnblogs.com/Cein/p/11081506.html
Copyright © 2011-2022 走看看