QT的CEF方案集成网页加载失败解决方案

CEF方案加载不显示网页问题

报错不兼容JS的Static语法块问题

✅ 解决方案（更新 Browserslist + Babel）

✅ 第一步：配置 browserslist

在 package.json 中添加或修改 browserslist 字段：

"browserslist": {
  "production": [
    "Chrome >= 84",
    "defaults"
  ],
  "development": [
    "last 1 chrome version"
  ]
}

---

✅ 第二步：启用 Babel 自定义配置

创建一个 .babelrc.js 文件（如果没有）并写入以下内容：

module.exports = {
  presets: [
    ['next/babel'],
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '84',
        },
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
  ],
}

然后在 app\page.tsx 文件最顶部添加：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

安装相关依赖：

pnpm install core-js regenerator-runtime @babel/preset-env

---

✅ 第三步：重新构建并测试

npm run build
npm run start

✅ 第四步：重新构建镜像

进入/dify-1.3.0/web目录，执行命令

docker build -t dify-web:local .

✅ 第五步：修改配置文件，重新创建容器运行

报错问题解决

❌ cytoscape 报错：“does not contain a default export”

报错信息：

Attempted import error: 'cytoscape' does not contain a default export (imported as 'cytoscape')

✅ 解决方法

降级 mermaid 到兼容版本

pnpm remove mermaid
pnpm add mermaid@10.4.0
pnpm build

目前已可以正常加载网页，但部分css样式不支持，后续需继续优化调整。