网页设计器资源插件

为 Webpack / Vite 宿主提供设计器资源的开发服务与生产复制。默认资源地址为 /inspur-lowcode/web-designer/，部署到子路径时可显式配置。

配置项

| 配置 | 默认值 | 用途 | | --- | --- | --- | | publicPath | /inspur-lowcode/web-designer/ | 浏览器访问设计器资源的完整站点路径，包含宿主部署前缀。必须以 / 开头，末尾 / 可省略。 | | outputPath | inspur-lowcode/web-designer | 资源复制到宿主构建输出目录中的相对目录。 | | src | node_modules/iss-lowcode-engine/dist | Webpack 构建插件、Vite 插件读取的引擎资源目录。 | | lowcodePath | node_modules/iss-lowcode-engine/dist | Webpack 开发中间件读取的引擎资源目录，保留原有参数名。 | | resConfig | 空函数 | 开发服务响应头回调：resConfig(res)。Webpack 在中间件上配置，Vite 在插件上配置。 |

Webpack 的相对源目录从执行命令的工作目录解析；Vite 从配置的 root 解析。Webpack 输出使用 output.path，Vite 输出使用 root 与 build.outDir。

publicPath 和 outputPath 独立，不自动推断宿主的 output.publicPath 或 Vite base。例如，服务器将宿主 dist/ 挂载到 /portal/：

宿主构建目录： dist/
设计器输出：   dist/inspur-lowcode/web-designer/js/editor.js
浏览器地址：   /portal/inspur-lowcode/web-designer/js/editor.js

此时只需将 publicPath 配为 /portal/inspur-lowcode/web-designer/，保留默认 outputPath。不要在输出目录中再添加一层 portal。

Webpack 5

const path = require('path');
const WebDesignerServerPlugin = require('iss-plugins-webpack-plugin');
const { WebDesignerServerMiddleware } = require('iss-plugins-webpack-plugin');

const designerResources = {
  publicPath: '/portal/inspur-lowcode/web-designer/',
  outputPath: 'inspur-lowcode/web-designer',
};

module.exports = {
  // 保留项目原有 entry、module 等配置。
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/portal/',
  },
  devServer: {
    setupMiddlewares(middlewares, devServer) {
      return WebDesignerServerMiddleware(middlewares, devServer, designerResources);
    },
  },
  plugins: [new WebDesignerServerPlugin(designerResources)],
};

开发中间件和构建插件必须配置相同的 publicPath。Webpack 生产复制沿用原有条件：mode: 'production'，可通过 webpack --mode production 指定。

Webpack 4

const path = require('path');
const WebDesignerServerPlugin = require('iss-plugins-webpack-plugin');
const { WebDesignerServerMiddleware4x } = require('iss-plugins-webpack-plugin');

const designerResources = {
  publicPath: '/portal/inspur-lowcode/web-designer/',
  outputPath: 'inspur-lowcode/web-designer',
};

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/portal/',
  },
  devServer: {
    before(app, devServer) {
      WebDesignerServerMiddleware4x(app, devServer, designerResources);
    },
  },
  plugins: [new WebDesignerServerPlugin(designerResources)],
};

若资源源目录也有调整，将构建插件的 src 和开发中间件的 lowcodePath 指向同一个引擎 dist 目录。

Vite

import { defineConfig } from 'vite';
import webDesignerPlugin from 'iss-plugins-vite-plugin';

export default defineConfig({
  base: '/portal/',
  build: {
    outDir: 'release',
  },
  plugins: [
    // 保留项目已有 Vue / React 等插件。
    webDesignerPlugin({
      publicPath: '/portal/inspur-lowcode/web-designer/',
      outputPath: 'inspur-lowcode/web-designer',
    }),
  ],
});

此配置将资源复制到 release/inspur-lowcode/web-designer/。将 release/ 挂载到 /portal/ 后，资源地址与 publicPath 一致。

自定义资源路径时，插件将 iss-lowcode-engine 排除在依赖预构建之外，让引擎入口经过资源路径转换。修改配置后需要重启 Vite 开发服务。

自定义资源目录名称

若期望使用 /portal/designer-assets/，配置为：

{
  publicPath: '/portal/designer-assets/',
  outputPath: 'designer-assets',
}

Webpack 开发中间件也需传入相同配置。部署后应能访问 /portal/designer-assets/preview.html 和 /portal/designer-assets/js/editor.js。

运行时接入与边界

继续使用原有引入方式，无须增加设计器初始化参数：

import 'iss-lowcode-engine';
import 'iss-lowcode-engine/dist/js/renderer.js';

• 插件同步改写宿主引入的入口代码、开发服务返回的文本资源，以及生产复制资源中的默认路径，覆盖设计器、渲染器、预览 iframe、物料与样式等引用。
• 只改写默认前缀 /inspur-lowcode/web-designer，不改动安装目录、二进制资源或业务自定义 URL。宿主 bundle / 模块中显式使用该默认前缀的代码也会参与改写。
• 不配置时保留原有默认访问路径和输出子目录。
• publicPath 当前支持站点绝对路径，不支持 CDN 域名、相对路径、查询参数、片段或 . / .. 路径段；outputPath 不得跳出宿主输出目录。
• 插件不修改服务器挂载规则。生产服务器仍需将宿主构建目录挂载到示例中的 /portal/。
• 已保存 schema 中的旧资源地址不会自动迁移；如果业务显式设置了渲染器 sandboxConfig.publicPath，也需将其调整为对应的完整访问路径，并保留末尾 /。

本仓库构建与检查

pnpm --filter iss-plugins build
node --test packages/iss-plugins/tests/resource-path.test.cjs

发布产物位于 packages/iss-plugins/dist/webpack-plugin/ 和 packages/iss-plugins/dist/vite-plugin/，各自包含本说明文件。