项目（Angular + Ionic）打包成 H5 应用后，刷新路由报 404，且图标不显示

目录

1.项目（Angular + Ionic）打包成 H5 后，刷新路由报 404

1.1 问题分析

1.2 解决方案

2.项目（Angular + Ionic）打包成 H5 后，图标无法正常显示

2.1 问题分析

2.2 解决方案

---

1.项目（Angular + Ionic）打包成 H5 后，刷新路由报 404

1.1 问题分析

ionic 默认使用的路由是 `host/xxx/xxx` 的形式

服务器将 路由 解析成 路径 了，也就是说，服务器无法找到该路径，因此报 404

前端路由采用 哈希路由（#），防止 路由 被解析成 路径

1.2 解决方案

在 `app-routing.module.ts` 里，引入哈希路由，运行项目就会是 host/#/xxx/xxx 了

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

2.项目（Angular + Ionic）打包成 H5 后，图标无法正常显示

2.1 问题分析

通过 chrome 开发者工具，选择图片元素，发现是 引用图片的路径问题

在服务器上，项目通常存放在某个子文件夹里

路径如果存在以下两种情况，会导致图标显示异常：

1. '../../../assets/xxx.png'
2. '/assets/xxx.png'

以上存放路径，经过 ionic 打包处理后，实际访问地址为：'域名/assets/xxx.png'

2.2 解决方案

'assets/xxx.png'