Ionic+Angular8生产模式下http-server运行异常排查

一、两种运行方式的核心差异 #

• 路由处理逻辑不一样：
  ionic serve用的是Angular自带的开发服务器，它知道你是SPA应用，所有路由请求都会自动转发到index.html，让Angular的前端路由来处理。而http-server是纯静态文件服务器，只会按请求路径找对应文件，比如访问/mypage时，它会去www目录下找mypage文件/文件夹，找不到就直接返回404，完全不懂SPA的路由规则。
• 环境与存储隔离：
  开发模式用的是environment.ts配置，自带调试、热重载，IndexDB的存储是绑定在开发服务器的源（比如localhost:8100）上。生产编译用environment.prod.ts，代码经过压缩优化，如果你用http-server跑在不同端口（比如8080），浏览器会把localhost:8100和localhost:8080当成不同的源，之前存在IndexDB里的数据就访问不到了，看起来像是被清空。
• 服务器配置差异：
  ionic serve已经帮你配好了SPA路由 fallback、CORS这些开发需要的功能，不用额外设置。http-server是轻量工具，默认没这些配置，就算开了HTTPS，也只是加密传输，解决不了路由的问题。

二、具体解决办法 #

1. 搞定页面刷新404 #

方法1：给http-server加SPA fallback配置

启动http-server时用-P参数把所有找不到的请求代理到index.html，命令改成这样：

# 普通HTTP
http-server www -P http://localhost:8080/index.html
# HTTPS模式
http-server www -S -P https://localhost:8080/index.html

这样不管访问哪个路由，只要对应文件不存在，都会跳转到index.html，Angular路由就能正常接管。

方法2：换用支持SPA的静态服务器

比如用serve工具（先全局安装：npm install -g serve），它默认支持SPA模式，启动命令简单：

serve -s www

这个工具会自动处理路由 fallback，比http-server省心。

方法3：改成Hash模式路由

在app-routing.module.ts里开启Hash模式，路由会变成/#/mypage这种格式，静态服务器不会把/mypage当成文件路径，自然不会404：

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

缺点是URL多了个#，但不用改服务器配置，兼容性拉满。

2. 解决IndexDB“被清空”的问题 #

IndexDB是按协议+域名+端口组成的“源”来隔离的，只要其中一项不同，就访问不到之前的数据：

• 测试时尽量保持开发和生产测试的端口一致，比如把http-server的端口改成8100（和ionic serve默认端口一样），启动命令加-p 8100参数，这样源一致，之前的IndexDB数据就能正常访问。
• 如果是正式部署，只要用生产域名访问，源固定下来，就不会出现这个问题。要是代码更新导致IndexDB结构变化，得在代码里加版本迁移逻辑，比如打开IndexDB时指定版本号，处理upgradeneeded事件来迁移旧数据。

3. 正式部署的额外配置 #

如果以后要部署到Nginx、Apache这类服务器，得手动加SPA fallback规则，比如Nginx里加：

location / {
  try_files $uri $uri/ /index.html;
}

这样服务器就会把所有找不到的请求转发到index.html，和开发服务器的逻辑一致。

内容的提问来源于stack exchange，提问作者Eitan