在IIS上部署VUE应用时vue-router路由跳转报404该如何配置

问题根因 #

vue-router默认的history模式下，前端路由是模拟生成的URL路径，IIS默认会将该路径当作真实存在的静态文件/目录去请求，找不到对应资源就会返回404错误，同时触发页面整体刷新。

前提准备 #

• 首先确保IIS服务器已经安装URL重写模块，该模块为IIS非默认自带组件，需单独安装后重启IIS管理器即可看到对应功能。

步骤1：新增web.config配置文件 #

在vue项目打包输出的dist根目录下，新建web.config文件，粘贴如下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="VueRouter History Mode" 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

注意：如果你的vue应用不是部署在IIS站点根目录，而是子目录，需要把<action type="Rewrite" url="/index.html" />中的路径改成对应子目录路径，比如部署在/vue-app子目录下就改为url="/vue-app/index.html"。

步骤2：确认vue-router配置匹配 #

vue3 + vue-router 4.x 配置参考 #

const router = createRouter({
  history: createWebHistory('/你的站点子目录路径/'), // 根目录部署直接传'/'即可
  routes: [...]
})

vue2 + vue-router 3.x 配置参考 #

const router = new VueRouter({
  mode: 'history',
  base: '/你的站点子目录路径/', // 根目录部署直接传'/'即可
  routes: [...]
})

步骤3：重启站点生效 #

配置完成后在IIS管理器中重启对应站点，清空浏览器缓存后即可正常访问。
如果不需要去除URL中的#符号，也可以直接将vue-router切换为hash模式，无需额外配置IIS即可直接运行。

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