IIS部署Laravel+Vue.js项目遇JS文件加载异常问题求助

问题根源 #

主域名下的前端静态资源请求（如js/app.js、css/chunk-vendors.css等）被IIS重写规则错误导向了/dist/index.html，而非实际的静态文件，导致JS/CSS加载后内容为HTML，无法正常解析执行。

修正后的web.config配置 #

在wwwroot目录下替换为以下配置，核心逻辑是优先匹配存在的静态资源，再处理SPA路由 fallback，同时保留子域名的API路由规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <!-- 子域名路由：api/src/flyer/admon/user 指向 Laravel 入口 -->
                <rule name="Subdomain to Laravel" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAny">
                        <add input="{HTTP_HOST}" pattern="^api\." />
                        <add input="{HTTP_HOST}" pattern="^src\." />
                        <add input="{HTTP_HOST}" pattern="^flyer\." />
                        <add input="{HTTP_HOST}" pattern="^admon\." />
                        <add input="{HTTP_HOST}" pattern="^user\." />
                    </conditions>
                    <action type="Rewrite" url="public/index.php/{R:0}" />
                </rule>

                <!-- 主域名：优先返回存在的静态资源 -->
                <rule name="Serve Static Files" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="None" />
                </rule>

                <!-- 主域名SPA路由：非静态资源请求 fallback 到 dist/index.html -->
                <rule name="SPA Fallback" stopProcessing="true">
                    <match url=".*" />
                    <action type="Rewrite" url="dist/index.html" />
                </rule>
            </rules>
        </rewrite>

        <!-- 确保静态资源的MIME类型正确，避免JS/CSS被当作文本解析 -->
        <staticContent>
            <remove fileExtension=".js" />
            <mimeMap fileExtension=".js" mimeType="application/javascript" />
            <remove fileExtension=".css" />
            <mimeMap fileExtension=".css" mimeType="text/css" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
    </system.webServer>
</configuration>

关键配置说明 #

• 子域名规则：通过{HTTP_HOST}匹配指定子域名，将请求转发到Laravel的public/index.php，保留原有URL路径参数。
• 静态资源优先：检查请求的文件是否存在，存在则直接返回，避免静态资源被SPA路由规则拦截。
• SPA Fallback：仅当请求不是现有文件时，才转发到dist/index.html，适配Vue.js的前端路由模式（如history模式）。
• MIME类型配置：确保JS、CSS等静态资源的MIME类型正确，避免浏览器无法正确解析资源。

Azure虚拟路径检查 #

确认Azure应用服务的虚拟路径配置：

• 根路径(/)指向site\wwwroot
• 无需额外为dist或public配置独立虚拟路径，避免路由冲突

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