构建后如何修复Ionic中使用href的路由问题？

没错，你遇到的这个问题几乎可以肯定是单页应用(SPA)的客户端路由与服务器静态文件服务不兼容导致的，而添加.htaccess（针对Apache服务器）是最常见的解决方案之一，我来给你详细拆解一下：

问题根源 #

Ionic Lab的开发服务器（ionic serve）已经内置了路由重写规则，它会把所有客户端路由请求都转发到index.html，所以你在测试时跳转正常。但当你用ionic build --prod构建生产包后，部署到常规的Web服务器（比如Apache）时，服务器会把/your-page这类路径当成物理文件去查找，找不到就返回404——因为这些路由都是Angular在客户端处理的，服务器本身没有对应的文件。

解决方案：配置服务器路由重写 #

1. Apache服务器：添加.htaccess文件

在你构建后的www目录（生产包的输出目录）下创建一个.htaccess文件，写入以下内容：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

这段规则的作用是：如果请求的不是真实存在的文件或目录，就把请求转发到index.html，让Angular的客户端路由来处理。

2. 其他常见服务器的配置（补充参考）

• Nginx：在你的服务器配置里添加这段location规则：

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

• IIS：需要在Web.config里配置重写规则，核心逻辑也是把所有非文件/目录请求转发到index.html。

额外注意事项 #

• 确保构建时设置了正确的--base-href参数：如果你的应用部署在域名根目录，构建命令是ionic build --prod --base-href "/"；如果是部署在子目录（比如https://yourdomain.com/my-app/），则要改为--base-href "/my-app/"，这个参数会影响Angular路由的基准路径。
• 部署后记得测试：不仅要测试页面跳转，还要测试直接在地址栏输入子页面路径、刷新页面的情况，确保都能正常加载。

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