Flutter Web部署Jenkins后加载失败，MIME类型错误求助

通过Jenkins部署Flutter Web项目后，页面持续处于加载状态，Chrome控制台报以下两个错误：

• Refused to execute script from 'https://******.com/web_entrypoint.dart.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
• Uncaught Error: Script error for "web_entrypoint.dart", needed by: main_module.bootstrap

项目的index.html代码如下：

<!DOCTYPE html>
<html>
<head>
  <base href="$FLUTTER_BASE_HREF">
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="taskdino_platform">
  <link rel="apple-touch-icon" href="icons/ic_launcher.png">
  <!-- Croppie -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="ic_launcher.png"/>

  <title>Taskdino</title>
  <link rel="manifest" href="manifest.json">
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAmDUD2ziWCN5Q1uIbk7fRKnJQWpRQqeE"></script>
  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
<div id="loading"></div>
<script>
         window.addEventListener('load', function(ev) {
           var loading = document.querySelector('#loading');
           loading.textContent = "Loading entrypoint...";
           _flutter.loader.loadEntrypoint({
             serviceWorker: {
               serviceWorkerVersion: serviceWorkerVersion,
             }
           }).then(function(engineInitializer) {
             loading.textContent = "Initializing engine...";
             return engineInitializer.initializeEngine();
           }).then(function(appRunner) {
             loading.textContent = "Running app...";
             return appRunner.runApp();
           });
         });
      </script>
</body>
</html>

1. 确认$FLUTTER_BASE_HREF变量替换有效性 #

index.html中<base>标签使用了$FLUTTER_BASE_HREF变量，需检查Jenkins部署流程是否正确替换该变量：

• 部署后查看页面源码，确认<base>的href值为项目实际根路径（如/或具体子路径），若变量未被替换，会导致资源请求路径错误，服务器返回404页面（MIME类型为text/html）而非JS文件。
• 若Jenkins未处理该变量，可在构建脚本中添加替换逻辑，例如用sed命令：

  sed -i "s/\$FLUTTER_BASE_HREF/\/your-project-path\//g" build/web/index.html
  

2. 修正服务器静态资源MIME类型配置 #

服务器需正确识别.js文件的MIME类型为application/javascript，否则会将JS文件以text/html类型返回，触发报错：

• 若使用Nginx，确保配置包含：

  types {
      application/javascript js;
      # 其他必要MIME类型...
  }
  

• 若使用Apache，需启用mod_mime模块，并添加配置：

  AddType application/javascript .js
  

3. 检查Jenkins构建产物完整性 #

确认Jenkins构建生成的build/web目录下存在web_entrypoint.dart.js、flutter.js、main.dart.js等必要文件，若文件缺失或路径错误，会导致请求失败，服务器返回HTML错误页。

4. 配置路由重写（部署在子路径时） #

若项目部署在域名子路径下，除正确设置<base>标签外，需配置服务器路由重写，避免刷新页面或直接访问子路由时返回404：

• Nginx示例配置：

  location /your-project-path/ {
      try_files $uri $uri/ /your-project-path/index.html;
  }
  

内容的提问来源于stack exchange，提问作者Nhựt Tân