AngularJS 1.x移除URL哈希后页面刷新异常的配置方案问询

嘿，我来帮你搞定这个问题！你已经完成了开启html5mode和添加<base>标签的关键步骤，现在只需要针对本地Grunt开发环境和GoDaddy Linux生产主机分别配置路由重定向，就能解决刷新页面时的服务器请求问题了：

一、本地Grunt开发环境（grunt-contrib-connect） #

默认的grunt-contrib-connect不会自动把所有路由请求指向index.html，所以我们需要借助connect-modrewrite中间件来实现重写规则：

1. 首先安装依赖包：

npm install connect-modrewrite --save-dev

2. 修改Gruntfile.js中的connect任务配置，添加重写中间件：

connect: {
  options: {
    port: 9000, // 你的本地端口
    hostname: 'localhost',
    middleware: function(connect, options) {
      var modRewrite = require('connect-modrewrite');
      return [
        // 规则说明：排除实际存在的静态文件和/api路径，其他请求都转到index.html
        modRewrite(['!\\.html|\\.js|\\.css|\\.png|\\.jpg|\\.gif|\\.svg|/api/.*$ /index.html [L]'])
      ].concat(connect.static(options.base));
    }
  },
  livereload: {
    options: {
      open: true,
      base: [
        '.tmp',
        'app' // 你的项目根目录
      ]
    }
  }
}

这样本地刷新页面时，所有路由请求都会被转发到index.html，Angular就能正确接管路由了。

二、GoDaddy Linux主机配置 #

GoDaddy的Linux主机默认使用Apache服务器，我们需要通过.htaccess文件设置重定向规则：

在你的网站根目录创建（或编辑）.htaccess文件，添加以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  # 排除实际存在的文件和目录（比如静态资源、真实页面）
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # 将所有其他请求重定向到index.html，交给Angular处理路由
  RewriteRule ^(.*)$ /index.html [L]
</IfModule>

注意事项： #

• 确保GoDaddy主机已经启用了mod_rewrite模块（绝大多数Linux主机默认开启，如果没开可以联系客服或在cPanel中启用）
• 确认你在index.html中设置的<base>标签路径正确：如果网站部署在根目录，用<base href="/">；如果是子目录（比如yourdomain.com/my-app/），要改成<base href="/my-app/">

完成以上两步配置后，不管是本地开发刷新页面，还是生产环境部署后刷新，Angular的html5mode都能正常工作，不会再出现URL被识别为服务器请求的问题啦！

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