HiDocs

1.angular基座

创建应用

bash

使用 angular-cli 先创建一个 Angular 的项目，在命令行运行如下命令：
ng new micro-base --skipTests=true  --style=less --prefix=iview --skip-install

--style=less 用于样式文件的文件扩展名或预处理器。
--skipTests=true 如果为true，则不会为新项目生成"spec.ts"测试文件。
--prefix iview 适用于初始项目的生成选择器的前缀。
--skip-install 暂时不下载依赖，我们自行npm i下载

安装

bash

cnpm i qiankun -S

路由配置要注意，主要给子应用的路由设置空组件，因为没有组件配置会报错的！

ng g component components/empty //创建组件

const routes: Routes = [
  //这里是每个子应用的路由
  {
    path: "sub-react",
    component: EmptyComponent
  },
  {
    path: "sub-vue",
    component: EmptyComponent
  },
  {
    path: "sub-angular",
    component: EmptyComponent
  },
  {
    path: "personal-center",
    component: EmptyComponent
  },
  { path: "**", component: EmptyComponent },
];

2.react项目

创建应用

bash

create-react-app react-app

有公共的配置文件书写方法

创建qiankun.ts文件，然后暴露出一个start方法，其他的项目也是可以进行效仿的！

修改运行端口号（和angular的方式不同）

json

set PORT=3001 && script start

其他修改方式：使用npm run eject，将配置释放出来再改

或者用rewired插件使用配置项修改端口号

3.vue项目

创建应用

bash

npm create vite@latest vue-app -- --template vue

直接按照笔记配置即可

修改端口号直接在vite.config.js里面即可

4.angular项目

bash

ng new angular-app --skipTests=true  --style=less --prefix=iview --skip-install

https://juejin.cn/post/7154242055558922270 配置方法的文章

https://qiankun.umijs.org/zh/guide/tutorial#angular-微应用官网的angular微应用配置文章

其实按照官网配置就可以实现，但是有一些关键点需要注意，坑比较多：

1.主要是angular.json配置文件的修改：

json

"architect": {
"build": {
  "builder": "@angular-builders/custom-webpack:browser", //这里要注意，是browser
  "options": { //在这里加options的customWebpackConfig选项
    "customWebpackConfig": {
      "path": "./custom-webpack.config.js"
    },
    "outputPath": "dist/angular-app",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.scss"
    ],
    "scripts": []
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server", //这里要注意，是dev-server
  "configurations": {
    "production": {
      "browserTarget": "angular-app:build:production"
    },
    "development": {
      "browserTarget": "angular-app:build:development"
    }
  },
  "defaultConfiguration": "development"
},