桁：
1. 全体構成
qiankun システムでは、マイクロフロントエンド プロジェクトにはメイン アプリケーションと複数のサブアプリケーションが含まれます。基本的に、各プロジェクト (メイン アプリケーション) は独立して開発および実行できます。
1.1 開発時のプロジェクト構造
合計 3 つのプロジェクト、1 つのメイン アプリケーション、2 つのサブアプリケーション、ディレクトリ構造:
.
├── app-01
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── public
│ ├── src
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
├── app-02
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── public
│ ├── src
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
├── main-app
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── public
│ ├── src
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
└── readme.md
1.2 導入プロジェクトの構造
選択できるデプロイメント方法は多数あります。ここで使用される方法は、3 つのプロジェクトを同じサーバーと同じポートにデプロイすることです。ディレクトリ構造は次のとおりです。
.
├── index.html
├── static
│ ├── index-011eeef2.css
│ └── index-0ab867b1.js
├── sub
│ ├── app-01
│ │ ├── index.html
│ │ ├── static
│ │ │ ├── index-0244ff29.js
│ │ │ └── index-83c9dd61.css
│ │ └── vite.svg
│ └── app-02
│ ├── index.html
│ ├── static
│ │ └── index-cb440182.js
│ └── vite.svg
└── vite.svg
2.開発
開発中に、次の 3 つのアプリケーションに対応するリスニング ポートが使用されます。
| 応用 | ポート |
|---|---|
| メインアプリ | 80 |
| アプリ-01 | 8081 |
| アプリ-02 | 8082 |
プロジェクトが開始されると、ブラウザーでアクセスできるようになります。
- http://localhost:80 全体的な運用効果
- http://localhost:8081 app-01 が単独で実行されている
- http://localhost:8082 app-02 が単独で実行されている
2.1 主な用途
主应用サブアプリケーションを登録し、サブアプリケーション間の切り替えを制御するために使用されます。
A. サブアプリケーションの登録
新しく作成した vue3 プロジェクトの main.ts にサブアプリケーションを登録します。
// 开发模式时，entry的值为子应用的开发演示环境的地址
if ("development" === import.meta.env.MODE) {
registerMicroApps([
{
name: "app_01",
entry: "//localhost:8081/",
container: "#container",
activeRule: "/app_01",
},
{
name: "app_02",
entry: "//localhost:8082/",
container: "#container",
activeRule: "/app_02",
},
]);
} else {
// 生产环境时，entry的路径为app在部署时的真实路径
registerMicroApps([
{
name: "app_01",
entry: "./sub/app-01",
container: "#container",
activeRule: "/app_01",
},
{
name: "app_02",
entry: "./sub/app-02",
container: "#container",
activeRule: "/app_02",
},
]);
}
setDefaultMountApp("/app_01");
// 启动 qiankun
start();
サブアプリケーションを登録する場合、開発モードとデプロイメントモードの2つのモードがあり、対応するentry値が異なります。
B. サブアプリケーションのルーティング
<a @click="toApp('/app_01')">app 01</a>
function toApp(path: string) {
history.pushState({
}, "", path);
}
ここでは a タグの href は使用できず、404 エラーが報告され、history.pushState制御ルートを使用する必要があることに注意してください。
この属性によりhrefブラウザが更新されるため、リソースを取得できません。
2.2 サブアプリケーション
A. 依存関係をインストールする
pnpm 追加 vite-plugin-qiankun
vite.config.js
設定ファイルの変更
export default defineConfig({
// 打包时，这里填充的为绝对路径，对应的是部署路径
base: "/sub/app-01",
plugins: [
vue(),
qiankun("app-01", {
useDevMode: true,
}),
],
});
C. エントランスの改修
開始するには 2 つの方法があります。
- 一人で始める
- メインアプリケーションで起動します
qiankun では、サブアプリケーションに 3 つのインターフェイスをエクスポートする必要があります。
- ブートストラップ
- マウント
- アンマウント
import {
renderWithQiankun,
qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";
import {
App as VueApp, createApp } from "vue";
import router from "./router";
import App from "./App.vue";
let app: VueApp<Element>;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
createApp(App).use(router).mount("#app");
} else {
renderWithQiankun({
mount(props) {
console.log("--app 01 mount");
app = createApp(App);
app.use(router);
app.mount(
(props.container
? props.container.querySelector("#app")
: document.getElementById("app")) as Element
);
},
bootstrap() {
console.log("--app 01 bootstrap");
},
update() {
console.log("--app 01 update");
},
unmount() {
console.log("--app 01 unmount");
app?.unmount();
},
});
}
3. 導入
3 つのプロジェクトが順番にパッケージ化されたら、main-appパッケージ化された出力内に新しいサブフォルダーを作成し、サブアプリケーションのパッケージ化された出力をそのサブフォルダーに移動します。構造：
.
├── index.html
├── static
│ ├── index-011eeef2.css
│ └── index-0ab867b1.js
├── sub
│ ├── app-01
│ │ ├── index.html
│ │ ├── static
│ │ │ ├── index-0244ff29.js
│ │ │ └── index-83c9dd61.css
│ │ └── vite.svg
│ └── app-02
│ ├── index.html
│ ├── static
│ │ └── index-cb440182.js
│ └── vite.svg
└── vite.svg
静的 Web サービスをローカルで開始してページにアクセスします。たとえば、serve次のコマンドを使用してサービスを開始します。
serve . -p 5500
ブラウザでアクセス：http://localhost:5500
4、ピット
001. メインアプリケーションがアプリを登録するとき、activeRule2つのモードがあります
ハッシュモード
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
registerMicroApps([
{
name: "app-hash",
entry: "http://localhost:8080",
container: "#container",
activeRule: getActiveRule("#/app-hash"),
// 这里也可以直接写 activeRule: '#/app-hash'，但是如果主应用是 history 模式或者主应用部署在非根目录，这样写不会生效。
},
]);
履歴モード
registerMicroApps([
{
name: "app",
entry: "http://localhost:8080",
container: "#container",
activeRule: "/app",
},
]);
002.メインアプリ使用history時のサブアプリの切り替え制御方法
履歴モードでは、メイン アプリケーションはlocation.pathname変更を監視して、サブアプリケーションのロードとアンロードを切り替えます。
メインアプリケーションで付箋を使用してアプリケーションを切り替える場合:
<!-- 开发环境时，没有问题 -->
<!-- 部署环境时，会报错：/app_01 404的错误 -->
<a href="/app_01">app 01</a>
静的デプロイメント中の 404 の理由: a タグがブラウザーの更新をトリガーします。更新後、ブラウザーはバックグラウンド /app_01 へのリクエストを開始しますが、バックグラウンドにはこの物理パスがありません。
改善スキーム。history.pushStateインターフェイスを使用します。
<a @click="toApp('/app_01')">app 01</a>
function toApp(path: string) {
history.pushState({
}, "", path);
}
使用されるメソッドはhistory.pushStateブラウザーの更新動作をトリガーしません。ブラウザがpathname変更されると、qiankunルートの変更を感知して、対応するページを読み込みます。
この時点で、F5リフレッシュ操作が積極的に実行されていなければ、すべてが正常です。ただしF5、使用後もエラー 404 が報告されます。この時点では、バックグラウンド ルーティングが連携する必要があります。Nginx を例に挙げます。
server {
listen 8080;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /child/vue-history {
root html;
index index.html index.htm;
try_files $uri $uri/ /child/vue-history/index.html;
}
}