data: "child子应用",
}, //传参

},
]);
// 启动
start();

##### 跨域配置


* vue.config.js

const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 30001, //主应用启动端口号，视情况而定
headers: {
“Access-Control-Allow-Origin”: “*”, // 允许跨域访问子应用页面
},
},
})

#### 子应用配置


##### 路由配置

import {
createRouter,
createWebHistory
} from ‘vue-router’
import ‘…/public-path’ // 引入public-path文件
const router = createRouter({
base: window.POWERED_BY_QIANKUN ? ‘/vue’ : ‘/’, // qiankun进入子应用时，返回true
history: createWebHistory(), // 不带#
routes: [{
path: ‘/’,
redirect: ‘/child’
},
{
path: ‘/child’,
component: () => import(‘@/components/child’) //绑定一个child组件
}
]
})
export default router

##### qiankun配置


* src路径下添加public-path.js

// eslint-disable-next-line no-undef
if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}

* main.js抛出生命周期钩子

import ‘./public-path’; // 注意需要引入public-path
import { createApp } from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’;
let instance = null;

function render({ container } = {}) {
instance = createApp(App);
instance.use(router);
instance.use(store);
instance.mount(container ? container.querySelector(‘#app’) : ‘#app’);//app.

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

vue有对应的div
}

// 如何独立运行微应用？
if (!window.POWERED_BY_QIANKUN) {
render();
}

export async function bootstrap(props) {
// 启动
}
export async function mount(props) {
// 挂载
render(props);
}
export async function unmount(props) {
// 卸载
instance.unmount();
instance = null;
}

##### 跨域配置


vue.config.js

const { name } = require(“./package.json”);
const { defineConfig } = require(“@vue/cli-service”);

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 30000, // 指定端口 与主应用一致
headers: {
“Access-Control-Allow-Origin”: “*”, // 配置跨域
“Access-Control-Allow-Headers”: “*”,
“Access-Control-Allow-Credentials”: “true”,
“Access-Control-Allow-Methods”: “*”,
“Cache-Control”: “no-cache”,
},
client: {
overlay: {
errors: true,
warnings: false,
}
},
},
configureWebpack: {
output: {
library: ${name}-[name],
libraryTarget: “umd”,
chunkLoadingGlobal: webpackJsonp\_${name},
}
},
});

#### 整体效果


![在这里插入图片描述](https://img-blog.csdnimg.cn/18f24e15c3454024bf391191d47d7688.png)  


### HTTP

* HTTP 报文结构是怎样的？

* HTTP有哪些请求方法？

* GET 和 POST 有什么区别？

* 如何理解 URI？

* 如何理解 HTTP 状态码？

* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

* 对 Accept 系列字段了解多少？

* 对于定长和不定长的数据，HTTP 是怎么传输的？

* HTTP 如何处理大文件的传输？

* HTTP 中如何处理表单数据的提交？

* HTTP1.1 如何解决 HTTP 的队头阻塞问题？

* 对 Cookie 了解多少？

* 如何理解 HTTP 代理？

* 如何理解 HTTP 缓存及缓存代理？

* 为什么产生代理缓存？

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域？浏览器如何拦截响应？如何解决？  



![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)