• 微前端qiankun接入Vue和React项目

    主应用：Vue3+Webpack

    1、创建主应用：

    npx vue create main-vue3-app

    2、安装qiankun

    npx yarn add qiankun

    3、项目中使用的vue、vue-router、qiankun依赖如下，webpack版本为5.x

    4、在根目录下创建vue.config.js

    1. const { defineConfig } = require('@vue/cli-service');
    2. const packageName = require('./package.json').name;
    3. module.exports = defineConfig({
    4.     lintOnSave: false,
    5.     devServer: {
    6.         // 可以在配置中 配置端口 VUE_APP_PORT = 8080
    7.         port: 8080,
    8.         headers: {
    9.             'Access-Control-Allow-Origin': '*' // 允许跨域访问子应用页面
    10.         }
    11.     }
    12. })

    5、入口组件App.vue

    1. <template>
    2.   <nav>
    3.     <router-link to="/">Homerouter-link> |
    4.     <router-link to="/vue2-webpack-app">wepback+vue2Approuter-link> |
    5.     <router-link to="/vue3-vite-app">vite+vue3Approuter-link> |
    6.     <router-link to="/vue3-webpack-app">wepback+vue3Approuter-link> |
    7.     <router-link to="/react-webpack-app">wepback+reactApprouter-link> |
    8.     <router-link to="/react-vite-app">vite+reactApprouter-link> 
    9.  
    10.  
    11.  
    12.   nav>
    13.   <router-view/>
    14. template>
    15.  
    16. <style>
    17. #app {
    18.   font-family: Avenir, Helvetica, Arial, sans-serif;
    19.   -webkit-font-smoothing: antialiased;
    20.   -moz-osx-font-smoothing: grayscale;
    21.   text-align: center;
    22.   color: #2c3e50;
    23. }
    24.  
    25. nav {
    26.   padding: 30px;
    27. }
    28.  
    29. nav a {
    30.   font-weight: bold;
    31.   color: #2c3e50;
    32. }
    33.  
    34. nav a.router-link-exact-active {
    35.   color: #42b983;
    36. }
    37. style>

    6、然后创建微应用对应的路由页面以及注册微应用

    router.ts

    1. import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    2.  
    3.  
    4. const routes: Array<RouteRecordRaw> = [
    5.   {
    6.     path: '/',
    7.     name: 'index',
    8.     component: () => import('../views/Index.vue')
    9.   },
    10.   {
    11.     path: '/vue2-webpack-app/:chapters*',
    12.     name: 'vue2-webpack-app',
    13.     component: () => import('../views/Vue2App.vue')
    14.   },
    15.   {
    16.     path: '/vue3-vite-app/:chapters*',
    17.     name: 'vue3-vite-app',
    18.     component: () => import('../views/ViteApp.vue')
    19.   },
    20.   {
    21.     path: '/vue3-webpack-app/:chapters*',
    22.     name: 'vue3-webpack-app',
    23.     component: () => import('../views/Vue3App.vue')
    24.   },
    25.   {
    26.     path: '/react-webpack-app/:chapters*',
    27.     name: 'react-webpack-app',
    28.     component: () => import('../views/ReactWebpack.vue')
    29.   },
    30. {
    31.     path: '/react-vite-app/:chapters*',
    32.     name: 'react-vite-app',
    33.     component: () => import('../views/ReactVite.vue')
    34.   }
    35. ]
    36.  
    37. const router = createRouter({
    38.   history: createWebHistory(),
    39.   routes
    40. })
    41.  
    42. export default router

    微应用：Vue2+Webpack

    1、在主应用下创建对应的路由页面 views/Vue2App.vue

    1. <template>
    2.     <div id="vue2-webpack-app"/>
    3. template>
    4.  
    5. <script setup lang="ts">
    6. import { onMounted, ref } from 'vue';
    7. import { registerMicroApps, start } from 'qiankun';
    8.  
    9. const loading = ref(false);
    10. registerMicroApps([
    11.     {
    12.         name: 'vue2-webpack-app',
    13.         entry: '//localhost:8081/',
    14.         container: '#vue2-webpack-app',
    15.         activeRule: '/vue2-webpack-app',
    16.        
    17.     }
    18. ]);
    19. onMounted(() => {
    20.     if (!window['qiankunStarted']) {
    21.         window['qiankunStarted'] = true;
    22.         start();
    23.     }
    24. });
    25. script>
    26.  
    27. <style scoped>style>

    2、创建vue2+webpack项目，选2.x版本

    npx vue create vue2-app

    3、项目中使用的vue、vue-router依赖如下，webpack版本为5.x

    4、在根目录下创建vue.config.js

    1. const { defineConfig } = require('@vue/cli-service');
    2. const packageName = require('./package.json').name;
    3. module.exports = defineConfig({
    4.     lintOnSave: false,
    5.     devServer: {
    6.         // 可以在配置中 配置端口 VUE_APP_PORT = 8080
    7.         port: 8081,
    8.         headers: {
    9.             'Access-Control-Allow-Origin': '*' // 允许跨域访问子应用页面
    10.         }
    11.     },
    12.     configureWebpack: {
    13.         output: {
    14.             library: `${packageName}-[name]`,
    15.             libraryTarget: 'umd',
    16.             chunkLoadingGlobal: `webpackJsonp_${packageName}`,
    17.         },
    18.     }
    19. })

    5、在src根目录下创建public-path.js

    1. if (window.__POWERED_BY_QIANKUN__) {
    2.     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 
    3. }

    6、router/index.ts

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import IndexVue from '../views/Index.vue'
    4.  
    5. Vue.use(VueRouter)
    6.  
    7. const routes= [
    8.   {
    9.     path: '/',
    10.     name: 'index',
    11.     component: IndexVue
    12.     // component: () => import( '@/views/Index.vue')
    13.  
    14.   },
    15. ]
    16. console.log(window.__POWERED_BY_QIANKUN__)
    17. const router = new VueRouter({
    18.   mode: 'history',
    19.   base: window.__POWERED_BY_QIANKUN__ ? '/vue2-webpack-app' : '/',
    20.   routes
    21. })
    22.  
    23. export default router

    7.入口文件main.ts/main.js

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from './router';
    4. import './public-path'
    5.  
    6. Vue.config.productionTip = false
    7. let instance:any = null;
    8.  
    9. function render(props:any = {}) {
    10.   const { container } = props
    11.   instance = new Vue({
    12.     name: 'root',
    13.     router,
    14.     render: h => h(App)
    15.   }).$mount(container ? container.querySelector('#app') : '#app')
    16.  
    17. }
    18.  
    19. if (!window.__POWERED_BY_QIANKUN__) {
    20.   render()
    21. }
    22. /**
    23. * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
    24. * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
    25. */
    26. export async function bootstrap() {
    27.     console.log('vue2+webpack bootstraped');
    28. }
    29.  
    30. /**
    31. * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
    32. */
    33. export async function mount(props:unknown) {
    34.     // ReactDOM.render(, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
    35.  
    36.     console.log('乾坤子应用容器加载完成，开始渲染 child')
    37.     console.log('props from main mount', props)
    38.     render(props)
    39. }
    40.  
    41. /**
    42. * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
    43. */
    44. export async function unmount() {
    45.   instance?.$destroy();
    46.  
    47.  
    48. }
    49.  
    50.  
    51. /**
    52. * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
    53. */
    54. export async function update(props:unknown) {
    55.     console.log('update props', props);
    56. }
    57.

    微应用：Vue3+Wepback

    1、在主应用下创建对应的路由页面 views/Vue3App.vue

    1. <template>
    2.     <div id="vue3-webpack-app"  />
    3. template>
    4.  
    5. <script setup lang="ts">
    6. import { onMounted, ref } from 'vue';
    7. import { registerMicroApps, start } from 'qiankun';
    8.  
    9. const loading = ref(false);
    10. registerMicroApps([
    11.     {
    12.         name: 'vue3-webpack-app',
    13.         entry: '//localhost:8082/',
    14.         container: '#vue3-webpack-app',
    15.         activeRule: '/vue3-webpack-app',
    16.         
    17.     }
    18. ]);
    19. onMounted(() => {
    20.     if (!window['qiankunStarted']) {
    21.         window['qiankunStarted'] = true;
    22.         start({
    23.             prefetch:false,
    24.             sandbox:{experimentalStyleIsolation:true}
    25.         });
    26.     }
    27. });
    28. script>
    29.  
    30. <style scoped>style>

    2、创建vue3+webpack项目，选3.x版本

    npx vue create vue3-webpack-app

    3、项目中使用的vue、vue-router依赖如下，webpack版本为5.x

    4、在根目录下创建vue.config.js

    1. const { defineConfig } = require('@vue/cli-service');
    2. const packageName = require('./package.json').name;
    3. const path = require('path');
    4. module.exports = defineConfig({
    5.     lintOnSave: false,
    6.     devServer: {
    7.         // 可以在配置中 配置端口 VUE_APP_PORT = 8080
    8.         port: 8082,
    9.         headers: {
    10.             'Access-Control-Allow-Origin': '*' // 允许跨域访问子应用页面
    11.         }
    12.     },
    13.     configureWebpack: {
    14.         output: {
    15.             library: `${packageName}-[name]`,
    16.             libraryTarget: 'umd',
    17.             chunkLoadingGlobal: `webpackJsonp_${packageName}`,
    18.         },
    19.         resolve:{
    20.             alias:{
    21.                 '@':path.join(__dirname,'src')
    22.             }
    23.         }
    24.     }
    25. })

    5、在src根目录下创建public-path.js

    1. if (window.__POWERED_BY_QIANKUN__) {
    2.     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 
    3. }

    6、router/index.ts

    1. import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    2. import IndexView from '../views/Index.vue'
    3.  
    4. const routes: Array<RouteRecordRaw> = [
    5.   {
    6.     path: '/',
    7.     name: 'index',
    8.     component: IndexView
    9.     // component: () => import('../views/Index.vue')
    10.   }
    11. ]
    12.  
    13. const router = createRouter({
    14.   history: createWebHistory(window.__POWERED_BY_QIANKUN__?'/vue3-webpack-app':process.env.BASE_URL),
    15.   routes
    16. })
    17.  
    18. export default router

    7.入口文件main.ts/main.js

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. import './public-path'
    5.  
    6. let app: any = null
    7. function render(props: any = {}) {
    8.     app = createApp(App)
    9.     const { container } = props
    10.     app.use(router).mount(container ? container.querySelector('#app') : '#app')
    11. }
    12.  
    13.  
    14. if (!window.__POWERED_BY_QIANKUN__) {
    15.     render()
    16. }
    17.  
    18. export async function bootstrap() {
    19.     console.log('vue3+webpack bootstraped');
    20. }
    21.  
    22. /**
    23. * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
    24. */
    25. export async function mount(props: unknown) {
    26.     // ReactDOM.render(, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
    27.  
    28.     console.log('乾坤子应用容器加载完成，开始渲染 child')
    29.     console.log('props from main mount', props)
    30.     render(props)
    31. }
    32.  
    33. /**
    34. * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
    35. */
    36. export async function unmount() {
    37.     console.log('unmount-------------------')
    38.     app.unmount()
    39.     app = null
    40.  
    41. }
    42.  
    43.  
    44. /**
    45. * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
    46. */
    47. export async function update(props: unknown) {
    48.     console.log('update props', props);
    49. }

    微应用：Vue3+Vite

    1、在主应用下创建对应的路由页面 views/ViteApp.vue

    1. <template>
    2.     <div id="vue3-vite-app"  />
    3. template>
    4.  
    5. <script setup lang="ts">
    6. import { onMounted, ref } from 'vue';
    7. import { registerMicroApps, start } from 'qiankun';
    8.  
    9. const loading = ref(false);
    10. registerMicroApps([
    11.     {
    12.         name: 'vue3-vite-app',
    13.         entry: '//localhost:5174/',
    14.         container: '#vue3-vite-app',
    15.         activeRule: '/vue3-vite-app',
    16.         
    17.     }
    18. ]);
    19. onMounted(() => {
    20.     if (!window['qiankunStarted']) {
    21.         window['qiankunStarted'] = true;
    22.         start();
    23.     }
    24. });
    25. script>
    26.  
    27. <style scoped>style>

    2、创建vue3+vite项目

    npx pnpm create vite vue3-vite-app --template vue-ts

    3、项目中使用的vue、vue-router依赖如下，vite版本为4.x

    4、安装vite-plugin-qiankun插件

    npx pnpm add vite-plugin-qiankun

    在vite.config.ts使用

    1. import { defineConfig } from 'vite'
    2. import vue from '@vitejs/plugin-vue'
    3.  
    4. import qiankun from 'vite-plugin-qiankun';
    5. // https://vitejs.dev/config/
    6. export default defineConfig({
    7.   plugins: [vue() ,qiankun('vue3-vite-app', {
    8.     useDevMode: true
    9.   })],
    10.   server:{
    11.     host: '127.0.0.1',
    12.     port: 5174,
    13.   }
    14.  
    15. })

    5、router/index.ts

    1. import { createRouter, createWebHistory } from 'vue-router'
    2. import {
    3.  
    4.   qiankunWindow
    5. } from 'vite-plugin-qiankun/dist/helper';
    6.  
    7. const router = createRouter({
    8.   history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/vue3-vite-app' : '/'),
    9.   routes: [
    10.     {
    11.       path: '/',
    12.       name: 'index',
    13.       component: () => import(/* webpackChunkName: "index" */ '../views/Index.vue')
    14.     }
    15.   ]
    16. })
    17.  
    18. export default router

    6、在src根目录下创建public-path.js

    1. if (window.__POWERED_BY_QIANKUN__) {
    2.     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 
    3. }

    7、main.ts

    1.  
    2.  
    3. import { createApp } from 'vue'
    4. import './public-path'
    5.  
    6.  
    7. import App from './App.vue'
    8. import router from './router'
    9.  
    10. import {
    11.     renderWithQiankun,
    12.     qiankunWindow
    13.   } from 'vite-plugin-qiankun/dist/helper';
    14.   
    15.   let app:any;
    16.   if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    17.     createApp(App).use(router).mount('#app');
    18.   } else {
    19.     renderWithQiankun({
    20.       mount(props) {
    21.         console.log('--mount');
    22.   console.log(props)
    23.         app = createApp(App);
    24.         app
    25.           .use(router)
    26.           .mount(
    27.             (props.container
    28.               ? props.container.querySelector('#app')
    29.               : document.getElementById('app')) as Element
    30.           );
    31.       },
    32.       bootstrap() {
    33.         console.log('--bootstrap');
    34.       },
    35.       update() {
    36.         console.log('--update');
    37.       },
    38.       unmount() {
    39.         console.log('--unmount');
    40.         app?.unmount();
    41.       }
    42.     });
    43.   }
    44.   
    45.

    微应用：React 18+Webpack

    1、在主应用下创建对应的路由页面 views/ReactWebpack.vue

    1. <template>
    2.     <div id="react-webpack-app"/>
    3. template>
    4.  
    5. <script setup lang="ts">
    6. import { onMounted, ref } from 'vue';
    7. import { registerMicroApps, start } from 'qiankun';
    8.  
    9. const loading = ref(false);
    10. registerMicroApps([
    11.     {
    12.         name: 'react-webpack-app',
    13.         entry: '//localhost:3000/',
    14.         container: '#react-webpack-app',
    15.         activeRule: '/react-webpack-app',
    16.         props: {
    17.  
    18.         }
    19.     }
    20. ]);
    21. onMounted(() => {
    22.     if (!window['qiankunStarted']) {
    23.         window['qiankunStarted'] = true;
    24.         start();
    25.     }
    26. });
    27. script>
    28.  
    29. <style scoped>style>

    2、创建React+Webpack项目

    npx create-react-app react-app

    3、项目中使用的react、react-dom、react-router-dom依赖如下，webpack版本为5.x

    4、创建config-overrides.js，修改配置

     npm i react-scripts

    修改package.json

    5、封装路由组件，src/router/index.js

    1. import React from 'react'
    2.  
    3. import Home from '../views/home'
    4. // 导入路由依赖
    5. import { Route,Routes} from 'react-router-dom'
    6.  
    7. export default function Router(){
    8.     return (
    9.         // 使用BrowserRouter包裹，配置路由
    10.       <Routes >
    11.         <Route element={<Home/>} path='/'>Route>
    12.       Routes>
    13.     )
    14. }

    6、在App.jsx中引入路由组件

    1. import Router from './router/index'
    2. import './App.css';
    3. function App() {
    4.   return (
    5.     <div>
    6.       <Router>Router>
    7.     div>
    8.   );
    9. }
    10. export default App;

    7、index.js入口

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import { BrowserRouter } from 'react-router-dom'
    4. import './index.css';
    5. import App from './App';
    6. import './public-path';
    7. import reportWebVitals from './reportWebVitals';
    8. // let root = createRoot(document.querySelector('#root'))
    9. let root = null;
    10. function render (props) {
    11.     const { container } = props;
    12.     root = root || ReactDOM.createRoot(container ? container.querySelector("#root") : document.getElementById("root") );
    13.     root.render(
    14.         <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? "/react-webpack-app" : "/"}>
    15.             <React.StrictMode>
    16.                 <App />
    17.             React.StrictMode>
    18.         BrowserRouter>
    19.     );
    20. }
    21.  
    22. if (!window.__POWERED_BY_QIANKUN__) {
    23.     render({});
    24. }
    25.  
    26. export async function bootstrap () {
    27.     console.log("[react18] react app bootstraped");
    28. }
    29.  
    30. export async function mount (props) {
    31.     console.log("[react18] props from main framework", props);
    32.     render(props);
    33. }
    34.  
    35. export async function unmount (props) {
    36.     root.unmount();
    37.     root = null;
    38. }
    39.  
    40.  
    41. reportWebVitals();

    微应用：React18+Vite

    1、在主应用下创建对应的路由页面 views/ReactVite.vue

    1. <template>
    2.     <div id="react-vite-app"/>
    3. template>
    4.  
    5. <script setup lang="ts">
    6. import { onMounted, ref } from 'vue';
    7. import { registerMicroApps, start } from 'qiankun';
    8.  
    9. const loading = ref(false);
    10. registerMicroApps([
    11.     {
    12.         name: 'react-vite-app',
    13.         entry: '//localhost:5175/',
    14.         container: '#react-vite-app',
    15.         activeRule: '/react-vite-app',
    16.        
    17.     }
    18. ]);
    19. onMounted(() => {
    20.     if (!window['qiankunStarted']) {
    21.         window['qiankunStarted'] = true;
    22.         start();
    23.     }
    24. });
    25. script>
    26.  
    27. <style scoped>style>

    2、创建React18+vite项目

    npx pnpm create vite react-vite-app --template react-ts

    3、项目中使用的react、react-dom 、react-router-dom依赖如下，vite版本为4.x

    4、安装vite-plugin-qiankun插件

    npx pnpm add vite-plugin-qiankun

    在vite.config.ts使用

    1. import { defineConfig } from 'vite'
    2. import react from '@vitejs/plugin-react'
    3. import qiankun from 'vite-plugin-qiankun'
    4.  
    5.  
    6. export default defineConfig({
    7.   plugins: [
    8.     // 在开发模式下需要把react()关掉
    9.     // https://github.com/umijs/qiankun/issues/1257
    10.     // react(),
    11.     qiankun('react-vite-app', { // 微应用名字，与主应用注册的微应用名字保持一致
    12.       useDevMode: true
    13.     })
    14.   ],
    15.   server: {
    16.     host: '127.0.0.1',
    17.     port: 5175,
    18.   }
    19. })

    5、封装路由组件，src/router/index.tsx

    1. import React from 'react'
    2.  
    3. import Home from '../views/home'
    4. // 导入路由依赖
    5. import { Route,Routes} from 'react-router-dom'
    6.  
    7. export default function Router(){
    8.     return (
    9.         // 使用BrowserRouter包裹，配置路由
    10.       <Routes >
    11.         <Route element={<Home/>} path='/'>Route>
    12.       Routes>
    13.     )
    14. }

     6、在App.tsx中引入路由组件

    1. import Router from './router/index'
    2. import React from 'react';
    3. import './App.css';
    4. function App() {
    5.   return (
    6.     <div>
    7.       <Router>Router>
    8.     div>
    9.   );
    10. }
    11. export default App;

    7、main.tsx入口

    1. import React from 'react'
    2. import ReactDOM from 'react-dom/client'
    3. import App from './App'
    4. import { BrowserRouter } from 'react-router-dom'
    5.  
    6. import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
    7. let root:any;
    8.  
    9. const render = (container:HTMLElement | undefined) => {
    10.   // 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地
    11.   
    12.   root = root || ReactDOM.createRoot(container ? container.querySelector("#root") : document.getElementById("root") );
    13.   console.log(qiankunWindow.__POWERED_BY_QIANKUN__)
    14.   root.render(
    15.       <BrowserRouter basename={qiankunWindow.__POWERED_BY_QIANKUN__ ? "/react-vite-app" : "/"}>
    16.           <React.StrictMode>
    17.               <App />
    18.           React.StrictMode>
    19.       BrowserRouter>
    20.   );
    21. }
    22.  
    23. const initQianKun = () => {
    24.   renderWithQiankun({
    25.     // 当前应用在主应用中的生命周期
    26.     // 文档 https://qiankun.umijs.org/zh/guide/getting-started#
    27.  
    28.     mount(props) {
    29.       render(props.container)
    30.       //  可以通过props读取主应用的参数：msg
    31.       // 监听主应用传值
    32.       props.onGlobalStateChange((res) => {
    33.         console.log(res.count)
    34.       })
    35.     },
    36.     bootstrap() { },
    37.     unmount() {
    38.     root.unmount();
    39.       root = null
    40.      },
    41.   })
    42. }
    43.  
    44.  
    45. // 判断当前应用是否在主应用中
    46. qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render(undefined)

    演示：

    20231027-120328

    issue

    发现使用webpack构建的微应用，不支持路由懒加载的写法，vite就可以

    Vue路由懒加载报错，ChunkLoadError: Loading chunk 0 failed，需要二次进入子应用或者在子应用中刷新才正常。 · Issue #1929 · umijs/qiankun (github.com)

    完整代码：

    UzumakiHan/qiankun-demo (github.com)

  • 相关阅读:
    向毕业妥协系列之机器学习笔记:神经网络（四）Tensorflow实现（中）多分类问题
    深入理解synchronized关键字
    Kubernetes快速部署
    记一次 某智能制造MES系统CPU 爆高分析
    Go 并发编程模型
    ​Vue + Element UI前端篇（二）：Vue + Element 案例 ​
    递归时间复杂度分析 && master公式
    Flask高级视图_蓝图模板，静态文件，url_for的实战
    一日一技：用Python做游戏有多简单
    No mapping for GET /swagger-ui.html的解决方法
  • 原文地址：https://blog.csdn.net/Hhjian524/article/details/134060867