插件部署

在前端开发工作流程中，前端插件的开发与部署有着不同的处理方式。在开发环境里，通常由开发人员在本地完成插件的开发工作。开发完成后，经过项目技术负责人的审核确认，将开发好的插件进行打包处理，并推送到团队的 npm 私有仓库。主应用在运行过程中，会依据模型动态加载 npm 私有仓库中的插件内容并使其运行。然而，在生产环境中，若主应用依旧从 npm 私有仓库加载插件内容，会面临诸多问题，无法满足实际需求。为了解决这一问题，我们提供了两种有效的部署方式。

动态代理模式

前端模板支持对插件加载基础路径进行修改。在生产环境的应用容器中，我们可以借助 Nginx 服务器，根据修改后的插件加载基础路径，将请求反向代理到 npm 私有仓库。这种方式一般适用于非私有化环境（例如演示环境）的生产部署，其显著优势在于无需重新构建应用。

以下是 Nginx 反向代理的配置示例：

nginx

# Nginx 反向代理配置示例
location /plugins/ {
    proxy_pass http://private-npm-registry/;
    proxy_set_header Authorization "Bearer ${NPM_TOKEN}";
}

静态打包模式

对于私有化部署环境，我们推荐采用静态打包模式。在此模式下，开发团队需要将当前应用所涉及的所有插件从团队的私有 npm 仓库拉取到当前项目仓库中，并对插件加载基础路径进行相应调整。之后，运行团队对当前项目进行构建，构建完成的镜像即可用于生产环境部署。这种方式虽然需要重新构建项目，但能更好地适应私有化部署环境的要求。

具体操作步骤如下：

配置下载清单（ibiz-download-pkg.config.js）：

在项目中创建或修改 ibiz-download-pkg.config.js 文件，配置插件下载的相关信息。示例代码如下：

export default defineDownloadPkgConfig({
  // 私有仓库地址
  registry: 'http://xxxxxxx',
  // 插件代码输出位置
  outDir: './public/plugins',
  // 插件列表
  dependencies: [
      // 插件名称@插件版本
      'vue@2.7.13'
  ],
});

下载插件
在配置好下载清单后，通过以下命令下载插件：
bash
```
pnpm download-pkg
```
更新环境文件中的插件基础加载路径（pluginBaseUrl）
修改项目中的环境文件，更新 pluginBaseUrl 变量，确保主应用能够正确加载本地的插件。示例代码如下：
js
```
window.Environment = {
  pluginBaseUrl: './plugins',
  // 其他环境变量...
}
```

通过以上两种方式，我们可以根据不同的生产环境需求，灵活选择合适的插件部署方案，确保前端插件在生产环境中稳定、高效地运行。

插件部署 ​

动态代理模式 ​

静态打包模式 ​

插件部署

动态代理模式

静态打包模式