ReExt ExtJS7.8.0-Vite构建部署后提示需插件但本地运行正常

问题描述 #

正在推进生产项目，目标是替换React应用依赖的自定义Node API。因已使用ExtJS并拥有Ext Direct服务器实现，将React应用迁移至ReExt，采用ExtJS store作为唯一远程数据提供者。

开发模式下执行vite命令可正常运行，支持热刷新，浏览器开发工具确认所有ExtJS文件已加载。但执行构建命令：

npm run vite build --mode development --outDir ./development

构建过程无错误，将开发构建包部署到IIS测试服务器后，页面显示启动屏提示：

"A ReExt plugin is needed to run this ReExt app"

应用加载完ext-all.js和classicoverrides.js后停止加载，控制台无报错，且已确认ext-all.js确实加载完成。

环境信息 #

• 依赖版本：@sencha/reext: ^1.1.2，react: ^18.2.0，ExtJS 7.8.0
• vite.config.js配置：

import { defineConfig } from "vite";
import reext from "./node_modules/@sencha/reext/dist/ReExt/vite-plugin-reext.js";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/aereg",
  server: {
    host: true,
  },
  plugins: [reext(), react({ include: /\.(mdx|js|jsx|ts|tsx)$/ })],
});

• ReExtProvider实现：

import React from "react";
import { ReExtProvider } from "@sencha/reext";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./main.css";
import "/scss/custom.scss";
import "../fontawesome/css/all.css";
import "./i18n";

var reactroot = ReactDOM.createRoot(document.getElementById("root"));
const ReExtData = {
  sdkversion: "7.8.0",
  toolkit: "classic",
  theme: "classic",
  rtl: false,
  locale: "en",
  debug: false,
  urlbase: "/aereg/",
  location: "local",
  overrides: true,
};
reactroot.render(
  <React.StrictMode>
    <ReExtProvider splash={false} ReExtData={ReExtData}>
      <App />
    </ReExtProvider>
  </React.StrictMode>
);

已尝试方案 #

曾尝试修改vite.config.js中ReExt插件的导入路径为@sencha别名，但不可行：

• @sencha为私有仓库，无法直接通过别名解析；
• 当前相对路径导入合法，Rollup可正常识别。

可能的解决方案 #

1. 配置IIS URL重写规则 #

由于此前React应用依赖URL Rewrite运行，ReExt可能依赖前端路由机制，需确保IIS重写规则覆盖所有非静态资源请求：

• 确保所有非文件/目录的请求都重定向到index.html，避免ReExt加载资源时出现404；
• 验证web.config规则是否排除了API等特殊路径，示例配置：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="ReExt Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/aereg/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

2. 验证构建资源路径一致性 #

• 检查构建后的development目录中，ReExt插件文件是否存在，路径是否与ReExtData中的urlbase匹配；
• 确认vite.config.js的base配置"/aereg"与IIS站点虚拟目录名称完全一致，避免资源加载路径错误。

3. 启用ReExt调试模式 #

修改ReExtData中的debug为true，重新构建部署，查看控制台是否输出插件加载失败的具体原因：

const ReExtData = {
  // ...其他配置
  debug: true,
  // ...其他配置
};

4. 确认ReExt插件加载顺序与打包状态 #

• 确保vite-plugin-reext在react插件之前加载（当前配置已符合要求）；
• 检查自定义ReExt插件是否正确注册，构建后插件文件路径是否未被篡改。

5. 验证ExtJS资源加载状态 #

• 查看浏览器网络请求，确认ext-all.js和classicoverrides.js的返回状态码为200；
• 若资源使用相对路径，尝试改为基于urlbase的绝对路径。

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