高校校园网站建设的要求天津手机版建站系统价格

当前位置： 首页 > news >正文

高校校园网站建设的要求,天津手机版建站系统价格,wordpress播放pdf,专业网站建设服务公司哪家好专栏#xff1a; 【微前端】什么是微前端【微前端】qiankun【微前端】qiankun vite vue3 一、整体结构 在 qiankun 体系下#xff0c;一个微前端工程包含一个主应用和多个子应用。本质上#xff0c;每个工程#xff08;主应用#xff09;都可以单独开发、运行。 1.1…专栏 【微前端】什么是微前端【微前端】qiankun【微前端】qiankun vite vue3 一、整体结构 在 qiankun 体系下一个微前端工程包含一个主应用和多个子应用。本质上每个工程主应用都可以单独开发、运行。 1.1 开发时工程结构 共三个工程一个主应用、两个子应用目录结构: . ├── 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.md1.2 部署工程结构 部署方式可以选择多种这里使用的方式是将三个工程部署在同一个 server、同一个 port 下目录结构为 . ├── 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二、开发 开发时三个应用对应的监听端口 应用端口main-app80app-018081app-028082 工程启动之后可以在浏览器访问 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();注册子应用时分为两种模式开发模式和部署模式对应的 entry 的值是有区别的。 B. 子应用路由 a clicktoApp(/app_01)app 01/afunction toApp(path: string) {history.pushState({}, , path); }需要注意的是这里不能使用 a 标签 的 href会报错 404 错误必须使用history.pushState控制路由。 因为href属性会导致浏览器刷新获取不到资源。 2.2 子应用 A. 安装依赖 pnpm add vite-plugin-qiankun vite.config.js 配置文件修改 export default defineConfig({// 打包时这里填充的为绝对路径对应的是部署路径base: /sub/app-01,plugins: [vue(),qiankun(app-01, {useDevMode: true,}),], });C. 入口改造 启动方式分为两种 单独启动在主应用中启动 qiankun 需要子应用导出三个接口 bootstrapmountunmount 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: VueAppElement; 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();},}); }三、部署 三个工程依次打包后在main-app的打包输出中新建 sub 文件夹将子应用的打包输出移动到 sub 文件夹中。结构 . ├── 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 四、坑点

1. 主应用注册 App 时activeRule 有两种模式 hash 模式 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 模式或者主应用部署在非根目录这样写不会生效。}, ]);history 模式 registerMicroApps([{name: app,entry: http://localhost:8080,container: #container,activeRule: /app,}, ]);002. 主应用使用history时如何控制子应用的切换 history 模式时主应用会监听location.pathname的变化从而切换子应用的加载与卸载。 主应用中使用 a 便签切换应用时 !– 开发环境时没有问题 – !– 部署环境时会报错/app_01 404的错误 – a href/app_01app 01/a404 的原因静态部署时a 标签会触发浏览器的刷新刷新后浏览器向后台发起请求/app_01后台的确没有这个物理路径 改进方案使用 history.pushState 接口 a clicktoApp(/app_01)app 01/afunction 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;} }六、源码 源码地址https://github.com/swlws/qiankun-vite-vue3