如何使用AngularJS ui-router移除URL中的index.html和感叹号(!)

嘿，我猜你大概率是在用前端路由框架（比如Vue Router这类）吧？毕竟URL里的感叹号(!)一般是hash模式下的路由标记，而index.html出现在地址栏里，大多是因为服务器没做路由重写或者默认索引配置。下面分步骤给你解决：

第一步：前端路由改模式，干掉感叹号 #

如果是Vue项目，直接把路由的模式从默认的hash改成history就行，代码大概是这样：

const router = new VueRouter({
  mode: 'history', // 替换原来的hash模式
  routes: [
    // 这里放你的路由配置项
  ]
})

改成history模式后，URL里的#!（感叹号）直接就消失了，路径会变成干净的格式。要是你用的是React Router，就把HashRouter换成BrowserRouter，原理是完全一样的。

第二步：服务器配置，移除index.html #

光改前端还不够，不然刷新页面或者直接访问带index.html的地址会出问题。这里给几个常见服务器的配置示例：

Nginx配置 #

在你的Nginx站点配置里加这段规则：

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

这个规则会让服务器找不到对应文件时自动跳转到index.html，同时访问xxx.com/index.html时，也会自动重写成xxx.com。

Apache配置 #

在项目根目录建个.htaccess文件，写这些内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  # 直接移除index.html
  RewriteRule ^index\.html$ - [L]
  # 处理路由刷新问题
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

本地开发环境（比如Vue CLI） #

要是本地开发想先测试效果，在vue.config.js里加这段：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

额外提醒 #

• 确保服务器开了URL重写模块，比如Apache的mod_rewrite，Nginx的rewrite模块得启用。
• 要是之前代码里有硬写的index.html链接，记得改成路由跳转或者相对路径，别让用户还能点到带index.html的地址。

这样操作完，你的URL就会变得干干净净，既没感叹号也没index.html啦！

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