本文主要是介绍IIS配置 URLRewrite vue单页应用程序（history模式），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML5 History 模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

IIS后端配置：

IIS下部署后的解决方案一般是使用 URLRewrite
1、首先要安装URLRewrite 下载地址
2、在你的网站根目录中创建一个 web.config 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

或者使用IIS的URL重写模块添加规则：


匹配的url-------请求的URL选择与模式匹配，模式中填写*，使用选项选择通配符;即表示所有的网站都通过此模式进行检查匹配。

条件--------是下面的条件选项，我们选择不是文件，逻辑分组为全部匹配。

操作--------重写到index.html（根据情况，设置为自己的单页面应用首页）。

这篇关于IIS配置 URLRewrite vue单页应用程序（history模式）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！