xdp 一站式快速开发平台

Onestop Rapid Development Platform

使用 vite3 + vue3 , axios pinia vue-i18n vue-router , ui 组件库： @arco-design/web-vue; 构建微前端框架，一站式快速开发平台

使用 vite 的插件，按需加载组件

vite.config.js :

import xdpui from "xdp/plugins/vite-plugin-xdp-ui.js"; // 按需加载xdp ui

return {
  plugins: [
    xdpui(), // 按需加载插件 - 按需加载xdp的组件
    vue(),
    ...
  ]
}

微前端 - Portal

vite.config.js :

import xdpui from "xdp/plugins/vite-plugin-xdp-ui.js"; // 按需加载xdp ui
import xdpPortal from "xdp/plugins/vite-plugin-xdp-portal.js"; // 使用xdp 微前端插件
import { name as appName } from "./package.json";
const env = {
  processEnv: process.env,
  isDev: mode === "development",
  port: 8800,
  appName, // 项目名称

  oslUrl: "//localhost:8000", // 项目部署地址
  oslBase: "/v3/xdp-osl", // 共享库 base
  path: "D:\\xf-web\\v3\\xdp-portal", // portal文件地址可以不设置
};

return {
  base: "", // 设置成 "" 必要
  plugins: [
    xdpui(), // 按需加载插件 - 按需加载xdp的组件
    vue(),
    ...
    xdpPortal(env) // 使用xdp 子产品 插件
  ]
}

微前端子产品 - sub App

vite.config.js :

import xdpui from "xdp/plugins/vite-plugin-xdp-ui.js"; // 按需加载xdp ui
import xdpApp from "xdp/plugins/vite-plugin-xdp-app.js"; // 使用xdp 微前端插件
import { name as appName } from "./package.json";

const env = {
  processEnv: process.env,
  isDev: mode === "development",
  port: 8021,
  appName,

  oslUrl: "//localhost:8000", // 项目部署地址
  oslBase: "/v3/xdp-osl", // 在线共享库地址
  portalBase: "/v3/xdp-portal", // portal 地址
  path: `D:\\xf-web\\v3\\app\\${appName}`, // 子产品发布的文件夹地址 可以为空
};

return {
  base: "", // 设置成 "" 必要
  plugins: [
    xdpui(), // 按需加载插件 - 按需加载xdp的组件
    vue(),
    ...
    xdpApp(env) // 使用xdp 子产品 插件
  ]
}