解决 Vue 路由在 IIS 中的 404 问题

F12报错：

index-KzMmKQ0C.js:1  Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

　　

 

如果你的 **Vue.js 项目** 部署在 **IIS** 上，访问 `http://demo.eduagentai.cn/essay/starter` 返回 **404 Not Found**，可能是由于 **路由模式（history 模式 vs hash 模式）**、**IIS 重写规则未配置** 或 **静态文件路径错误** 导致的。以下是详细解决方案：

---

## **1. 检查 Vue 路由模式**
Vue Router 有两种模式：
- **Hash 模式**（默认）：URL 带 `#`，如 `http://example.com/#/essay/starter`（IIS 默认支持）。
- **History 模式**：URL 无 `#`，如 `http://example.com/essay/starter`（需要 IIS URL 重写规则支持）。

### **解决方案**
#### **(1) 使用 Hash 模式（推荐简单方案）**
修改 `src/router/index.js`：
```javascript
const router = new VueRouter({
mode: 'hash', // 默认是 hash，可显式声明
routes: [...]
})
```
- **无需额外 IIS 配置**，直接部署即可访问 `http://demo.eduagentai.cn/#/essay/starter`。

#### **(2) 使用 History 模式（需 IIS 重写规则）**
如果必须用 `history` 模式（无 `#`），需配置 IIS **URL 重写规则**：
1. **修改 `src/router/index.js`**：
```javascript
const router = new VueRouter({
mode: 'history', // 使用 history 模式
routes: [...]
})
```
2. **在 Vue 项目根目录创建 `web.config`**（用于 IIS 重定向）：
```xml
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Vue Router History" 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>
```
3. **部署时确保 `web.config` 复制到 IIS 站点根目录**。

---

## **2. 检查 IIS 静态文件部署**
### **(1) 确认 Vue 打包文件正确部署**
- 运行 `npm run build` 生成 `dist` 文件夹。
- 将 `dist` 内所有文件（包括 `index.html`、`js`、`css` 等）复制到 IIS 站点目录（如 `C:\wwwroot\demo`）。

### **(2) 检查 IIS 默认文档**
- 在 IIS 中，选择站点 → **默认文档**。
- 确保 `index.html` 在列表中，并且优先级最高。

---

## **3. 检查 IIS URL 重写模块**
如果使用 **history 模式**，必须安装 **IIS URL Rewrite 模块**：
1. **下载并安装**：
[Microsoft URL Rewrite Module](https://www.iis.net/downloads/microsoft/url-rewrite)（如果未安装）。
2. **验证是否安装**：
- 打开 IIS 管理器 → 站点 → 查看是否有 **“URL 重写”** 选项。

---

## **4. 测试访问**
### **(1) 直接访问 `index.html`**
- 测试 `http://demo.eduagentai.cn/index.html`，看是否能加载 Vue 应用。
- 如果能加载，但 `/essay/starter` 404，说明 **路由未正确处理**（需按步骤 1 配置）。

### **(2) 检查浏览器控制台（F12）**
- 查看是否有 **JS/CSS 加载失败**（路径错误）。
- 如果静态资源 404，修改 `vue.config.js` 设置 `publicPath`：
```javascript
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}
```
重新构建并部署。

---

## **5. 其他可能问题**
### **(1) 应用程序池配置**
- 确保应用程序池使用 **无托管代码（No Managed Code）**（Vue 是纯前端，不需要 .NET 运行时）。
- 在 IIS 中，选择应用程序池 → 设置 **“.NET CLR 版本”** 为 **“无托管代码”**。

### **(2) 静态文件 MIME 类型**
- 如果某些文件（如 `.js`、`.css`）无法加载，检查 IIS → **MIME 类型** 是否包含：
- `.js` → `application/javascript`
- `.css` → `text/css`

### **(3) 防火墙/权限问题**
- 确保 `IIS_IUSRS` 对站点目录有 **读取权限**。
- 检查 Windows 防火墙或安全组是否允许 **80/443 端口**。

---

## **总结：Vue 部署 IIS 404 问题解决步骤**
1. **确认 Vue Router 模式**（`hash` 或 `history`）。
2. **如果是 `history` 模式，配置 `web.config` 重写规则**。
3. **确保 `dist` 文件正确部署到 IIS 根目录**。
4. **检查默认文档、URL 重写模块、静态文件权限**。
5. **测试 `index.html` 是否能加载，再检查路由**。

如果仍有问题，请提供：
- **Vue Router 配置代码**。
- **IIS 站点目录结构截图**。
- **浏览器控制台错误截图**。

这样可以更精准定位问题！

 

安装 URL Rewrite 模块：https://www.iis.net/downloads/microsoft/url-rewrite

两个配置文件代码；有区别：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg|woff|woff2|ttf|eot|ico))" />
          <action type="None" />
        </rule>
        <rule name="Vue Router History" 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>

--

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Vue Router History" 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>