Vue-Vite应用部署至Azure Portal后MIME类型错误求助

错误原因分析 #

1. main.css MIME类型错误 #

你在main.js中通过ES模块语法import './assets/main.css'引入CSS，这在Vite构建流程中合法，但部署到Azure Web App后，服务器的路由重写规则错误地将CSS文件请求也转发到了index.html，导致浏览器原本期望加载JS模块（因通过import引入），但实际收到text/css类型响应，触发MIME类型检查错误。

2. router路径返回text/html错误 #

这是Vue Router history模式的典型问题：访问/router这类路由路径时，服务器找不到对应物理文件，你的重写规则会将所有非文件/非目录请求转发到index.html，但浏览器此时在尝试加载路由相关的JS模块，收到的却是text/html类型的index.html，因此报错。

具体修复步骤 #

1. 修正Azure Web App的重写规则（关键） #

修改app.config中的rewrite规则，排除所有静态资源后缀，避免静态文件请求被错误转发：

<configuration>
  <system.webServer>
    <staticContent>
      <!-- Azure默认已正确配置.css的MIME类型，移除重复配置避免冲突 -->
      <mimeMap fileExtension=".vue" mimeType="text/javascript" />
    </staticContent>

    <rewrite>
      <rules>
        <rule name="VueJS" stopProcessing="true">
          <!-- 匹配所有路径，但排除静态资源后缀 -->
          <match url="^(?!.*\.(js|css|vue|ico|png|svg|jpg|jpeg|woff|woff2|ttf)$).*$" />
          <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>
    <directoryBrowse enabled="false" /> <!-- 关闭目录浏览提升安全性 -->
  </system.webServer>
</configuration>

说明：

• 正则表达式^(?!.*\.(js|css|vue|ico|png|svg|jpg|jpeg|woff|woff2|ttf)$)会过滤掉所有带有常见静态资源后缀的请求，确保这类请求直接返回对应文件，不被重写。

2. 确认Vite构建与部署规范 #

• 确保部署到Azure的是dist目录下的构建产物，而非源码。
• 保留vite.config.js中base: './'的配置，确保构建后的资源路径为相对路径，适配Azure部署环境。

3. 优化importmap依赖处理 #

你的index.html使用了CDN的Vue和Pinia，可在vite.config.js中添加external配置，避免Vite重复打包这些依赖：

export default defineConfig({
  // ...其他原有配置
  external: ['vue', 'pinia']
})

验证修复 #

重新部署修改后的app.config和构建产物到Azure Web App，清除浏览器缓存后访问页面：

• CSS文件会被正确加载，不再触发MIME类型错误。
• 路由路径会被正确转发到index.html，Vue Router接管路由逻辑，模块加载错误消失。

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