Vue2应用部署IIS后刷新报错：Uncaught SyntaxError异常

出现Uncaught SyntaxError: Unexpected token '<'的核心原因是：刷新页面时IIS没有正确返回对应的JS文件，而是返回了HTML内容（比如404页面的HTML），导致JS解析失败。以下是具体解决步骤：

• 检查路由模式
  如果使用history路由模式，IIS需要额外配置URL重写；若暂时不想配置，可先切换为hash模式测试：

  // router/index.js
  const router = new VueRouter({
    mode: 'hash', // 替换为hash模式快速验证
    routes: [...]
  })
  

• 配置IIS URL重写规则

  1. 先在IIS中安装「URL Rewrite」模块（通过Web平台安装程序搜索安装）
  2. 在项目根目录创建web.config文件，添加以下配置：

     <?xml version="1.0" encoding="UTF-8"?>
     <configuration>
       <system.webServer>
         <rewrite>
           <rules>
             <rule name="Handle Vue 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>
         <!-- 确保静态文件MIME类型正确 -->
         <staticContent>
           <mimeMap fileExtension=".js" mimeType="application/javascript" />
           <mimeMap fileExtension=".css" mimeType="text/css" />
         </staticContent>
       </system.webServer>
     </configuration>
     

  3. 若项目部署在IIS子应用（如localhost/my-vue-app），需把<action>中的url改为/my-vue-app/index.html

• 设置正确的publicPath
  修改vue.config.js中的publicPath，匹配部署路径：

  // vue.config.js
  module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/my-vue-app/' // 子应用路径，根目录则写'/'
      : '/'
  }
  

• 验证IIS静态文件配置

  1. 确保IIS站点的应用程序池对项目文件夹有读取权限
  2. 确认IIS已启用「静态文件」功能（服务器管理器-添加角色和功能-Web服务器-常见HTTP功能-勾选静态文件）

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