vue在IIS部署报错：Failed to load module script: Expected a JavaScript module script but the server

vue在IIS部署报错：Failed to load module script: Expected a JavaScript 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.
报错文件：index-CbvL4I9j.js:

在这里插入图片描述

我项目是：ZRAdmin.NET
基于.NET5/.NET7/.NET8、sqlsugar + vue2.x/vue3.x、Element UI、uniapp前后端分离的后台管理系统
前端技术：

Vue 版前端技术栈：基于 vue2.x/vue3.x、vuex、vue-router 、vue-cli 、axios、 element-ui、echats、i18n、vite、webpack 国际化等，前端采用 vscode 工具开发

后端技术：

核心框架：.Net5.0/.Net7.0/.Net8.0 + Web API + sqlsugar + swagger + signalR + IpRateLimit + Quartz.net + Redis

一、修改配置`.env.production`

# 生产环境配置
ENV = 'production'

# 生产环境(不要修改后端的路径)
VITE_APP_BASE_API = 'http://www.xxx.com/prod-api'

# 路由前缀
VITE_APP_ROUTER_PREFIX = '/'

# 默认上传地址
VITE_APP_UPLOAD_URL = '/Common/UploadFile'

#socket API
VITE_APP_SOCKET_API = '/msghub'

重点

# 路由前缀
VITE_APP_ROUTER_PREFIX = '/'

二、修改配置`web.config`

在打包后的前端项目中添加web.config配置文件，添加以下代码

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules> 
				<rule name="msghub" patternSyntax="Wildcard">
                    <match url="*msghub*" />
                    <action type="Rewrite" url="http://localhost:8502/msghub{R:2}" />
                </rule>
				<rule name="index">
                    <match url="^((?!(api|msghub)).)*$" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
				<rule name="api" patternSyntax="Wildcard">
                    <match url="*api/*" />
                    <action type="Rewrite" url="http://localhost:8502/{R:2}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

重点

url="http://localhost:8502/ 需要修改成你后端实际运行地址，即接口服务地址

重点：URL重写

这个依赖IIS的URL重写功能

所以你需要确保你的IIS上有这个
配置完成后你的URL重新是这个样子的

URL重写的文件名：requestRouter_amd64.msi

延伸阅读

我项目是：ZRAdmin.NET
基于.NET5/.NET7/.NET8、sqlsugar + vue2.x/vue3.x、Element UI、uniapp前后端分离的后台管理系统
前端技术：

Vue 版前端技术栈：基于 vue2.x/vue3.x、vuex、vue-router 、vue-cli 、axios、 element-ui、echats、i18n、vite、webpack 国际化等，前端采用 vscode 工具开发

后端技术：

核心框架：.Net5.0/.Net7.0/.Net8.0 + Web API + sqlsugar + swagger + signalR + IpRateLimit + Quartz.net + Redis

官方地址：https://www.izhaorui.cn/doc/quicklj.html
iis 部署说明：https://www.izhaorui.cn/doc/vip/iis.html