Nuxt3项目配置IIS URL Rewrite后静态资源加载异常求助

核心原因 #

IIS URL Rewrite规则未正确转发静态资源请求到Nuxt服务，或Nuxt生成的资源路径未适配无端口的域名访问。

步骤1：调整Nuxt3配置 #

修改nuxt.config.ts，确保服务监听所有网卡，且静态资源路径基于根域名生成：

export default defineNuxtConfig({
  app: {
    baseURL: '/' // 确保资源路径以根路径开头，适配无端口域名
  },
  server: {
    host: '0.0.0.0', // 允许外部（IIS）访问Nuxt服务
    port: 3000 // 保持原有端口配置
  }
})

修改后重新执行npm run build生成新的构建文件。

步骤2：修正IIS URL Rewrite规则 #

确保规则转发所有请求（包括静态资源路径）到Nuxt服务，且需先安装IIS的Application Request Routing (ARR)模块（反向代理依赖）。

在站点的web.config中配置完整的重写规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="NuxtReverseProxy" stopProcessing="true">
          <match url="(.*)" /> <!-- 匹配所有路径 -->
          <action type="Rewrite" url="http://localhost:3000/{R:1}" /> <!-- 转发到Nuxt服务 -->
          <serverVariables>
            <set name="HTTP_X_FORWARDED_HOST" value="{HTTP_HOST}" />
            <set name="HTTP_X_FORWARDED_PROTO" value="http" /> <!-- 若用HTTPS则改为https -->
          </serverVariables>
        </rule>
      </rules>
    </rewrite>
    <!-- 可选：禁用IIS静态文件处理，避免优先读取本地文件 -->
    <handlers>
      <remove name="StaticFile" />
    </handlers>
  </system.webServer>
</configuration>

步骤3：验证资源路径与请求转发 #

• 打开浏览器开发者工具（F12），查看网络请求中静态资源的URL是否为http://nuxt.randomdd.com/_nuxt/xxx.css格式
• 若资源返回404，检查IIS是否已正确转发该请求到localhost:3000/_nuxt/xxx.css，可通过IIS日志或Nuxt服务日志确认

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