宁波网站制作价格,wordpress插代码,邢台推广公司,网站建设单位有哪些内容项目结构
基座#xff1a;vue3
子应用A#xff1a;vue3
子应用B#xff1a; react
子应用C#xff1a;vue3vite
项目目录#xff1a; 配置基座
首先下载qiankun yarn add qiankun # 或者 npm i qiankun -S 所有子应用也要安装#xff0c;vue-vite项目安装 cnpm ins…项目结构
基座vue3
子应用Avue3
子应用B react
子应用Cvue3vite
项目目录 配置基座
首先下载qiankun yarn add qiankun # 或者 npm i qiankun -S 所有子应用也要安装vue-vite项目安装 cnpm install vite-plugin-qiankun 设置main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./store
import { registerMicroApps, start } from qiankun;createApp(App).use(store).use(router).mount(#app)
registerMicroApps([{name: vueapp,entry: //localhost:3001, // 配置子应用的服务container: #qiankunid, // 子服务渲染的domactiveRule: /vue/, // 路由对应的子服务
}, {name: reactapp,entry: //localhost:3000,container: #qiankunid,activeRule: /react/,}, {name: vuevite,entry: //localhost:3002,container: #qiankunid,activeRule: /vuevite/,
}], {beforeLoad: [async() console.log(befor load)],beforeMount: [async() console.log(beforeMount )],afterMount: [async() console.log(afterMount )],
});// 启动 qiankun
start();
App.vue
templatediv classmaindiv classmainLeftrouter-link classmeunLi to/首页/router-linkrouter-link classmeunLi to/vue/vue/router-linkrouter-link classmeunLi to/react/react/router-linkrouter-link classmeunLi to/vuevite/vue-vite/router-link/divdiv classmainRightrouter-view /div idqiankunid/div/div/div
/templatestyle scoped langless
.main {width: 100vw;height: 100vh;display: flex;.mainLeft {width: 200px;height: 100vh;}.mainRight {flex: 1;height: 100vh;background: #f2f2f2;}.meunLi {width: 100%;height: 40px;line-height: 40px;padding: 0 20px;cursor: pointer;display: block;border-bottom: 1px solid #ddd;}
}
/stylevue3子应用
配置vue.config.js
const { defineConfig } require(vue/cli-service)
const { name } require(./package);console.log(name)
module.exports defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {headers: {Access-Control-Allow-Origin: *,},//设置代理hot: true,port: 3001,open: true,},configureWebpack: {output: {library: name,libraryTarget: umd, // 把微应用打包成 umd 库格式chunkLoadingGlobal: webpackJsonp_${name},},},
})
配置main.js
import ./public-path;
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./storelet app// createApp(App).use(store).use(router).mount(#vue-app)
function render(props {}) {const { container } props;app createApp(App)// 这里为了防止冲突 id修改了app.use(store).use(router).mount(#vue-app)}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log([vue] vue app bootstraped);
}
export async function mount(props) {console.log(mount, props);render(props);
}
export async function unmount() {app.unmount();
}
src下新增public-path.js
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
配置路由
import { createRouter, createWebHistory } from vue-router
import HomeView from ../views/HomeView.vueconst routes [{path: /,name: home,component: HomeView},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import ( /* webpackChunkName: about */ ../views/AboutView.vue)}
]
console.log(window.__POWERED_BY_QIANKUN__)
const router createRouter({history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? /vue/ : /),routes
})export default router
vue-vite子应用
vite下载qiankun 用cnpm install vite-plugin-qiankun
配置vite.config.js
import {defineConfig
} from vite
import vue from vitejs/plugin-vueimport qiankun from vite-plugin-qiankunexport default defineConfig({base: http://localhost:3002/,plugins: [vue(), qiankun(vuevite, { // 配置qiankun插件useDevMode: true})],server: {headers: {Access-Control-Allow-Origin: *,},port: 3002,cors: true,origin: http://localhost:3002},}) src下新增public-path.js
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
配置main.js
import ./public-path;
import {createApp
} from vue
import router from ./router/index;import {renderWithQiankun,qiankunWindow
} from vite-plugin-qiankun/dist/helper
import App from ./App.vuelet appif (!qiankunWindow.__POWERED_BY_QIANKUN__) {app createApp(App)app.use(router)app.mount(#vue-vite)
} else {renderWithQiankun({mount(props) {console.log(--mount);const { container } props;app createApp(App);app.use(router)app.mount(document.getElementById(vue-vite));},bootstrap() {console.log(--bootstrap);},update() {console.log(--update);},unmount() {console.log(--unmount);app.unmount();}});
}
配置路由
import {createRouter,createWebHistory
} from vue-routerconst routes [{path: /,name: 3v,component: () import (/components/3v.vue),}
]
console.log(window.__POWERED_BY_QIANKUN__)
const router createRouter({history: createWebHistory(/vuevite/),routes
})export default router
react子应用 src下新增public-path.js
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} 配置index.js
import ./public-path.js
import React from react;
import { createRoot } from react-dom/client;
import { BrowserRouter, Routes, Route } from react-router-dom;import App from ./App.js;let root;function render(props) {const { container } props;const dom document.getElementById(root)root createRoot(dom)root.render( BrowserRouter basename {window.__POWERED_BY_QIANKUN__ ? /react : /} App/ /BrowserRouter );}if (!window.__POWERED_BY_QIANKUN__) {render({});}export async function bootstrap() {console.log([react16] react app bootstraped);}export async function mount(props) {console.log([react16] props from main framework, props);render(props);}export async function unmount(props) {const { container } props;root.unmount()}
配置config-overrides.js
为了不暴露所有的webpack配置我们用 react-app-rewired 来配置webpack下载 cnpm i react-app-rewired 然后修改package.json的启动方法 然后根目录新增config-overrides.js文件
const { name } require(./package);module.exports {webpack: (config) {config.output.library ${name};config.output.libraryTarget umd;config.output.chunkLoadingGlobal webpackJsonp_${name};config.output.globalObject window;return config;},devServer: (_) {const config _;config.headers {Access-Control-Allow-Origin: *,};config.historyApiFallback true;config.hot false;config.watchContentBase false;config.liveReload false;return config;},
};
打包上线
这里用的nginx代理下面是nginx配置 #user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;#log_format main $remote_addr - $remote_user [$time_local] $request # $status $body_bytes_sent $http_referer # $http_user_agent $http_x_forwarded_for;#access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;# 开启gzip 功能#gzip on;# gzip_static on# 基座server {listen 8084;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;try_files $uri $uri/ /index.html; }#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location /50x.html {root html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {# proxy_pass http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {# root html;# fastcgi_pass 127.0.0.1:9000;# fastcgi_index index.php;# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;# include fastcgi_params;#}# deny access to .htaccess files, if Apaches document root# concurs with nginxs one##location ~ /\.ht {# deny all;#}}# reactserver {default_type text/html;charset utf-8;listen 3000;server_name localhost;# client_header_buffer_size 128k;# large_client_header_buffers 4 128k;# add_header Set-Cookie loginSessionHttps;port_in_redirect off; #防止跳转的时候带了端口号,会导致404#charset koi8-r;#access_log logs/host.access.log main;location / {root appreact; #指定访问跟路径文件夹为app1index index.html index.htm;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials true;try_files $uri $uri/ /index.html;}}# vue3server {default_type text/html;charset utf-8;listen 3001;server_name localhost;# client_header_buffer_size 128k;# large_client_header_buffers 4 128k;# add_header Set-Cookie loginSessionHttps;port_in_redirect off; #防止跳转的时候带了端口号,会导致404#charset koi8-r;#access_log logs/host.access.log main;location / {root appvue3;index index.html index.htm;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials true;try_files $uri $uri/ /index.html;}}# viteserver {default_type text/html;charset utf-8;listen 3002;server_name localhost;# client_header_buffer_size 128k;# large_client_header_buffers 4 128k;# add_header Set-Cookie loginSessionHttps;port_in_redirect off; #防止跳转的时候带了端口号,会导致404#charset koi8-r;#access_log logs/host.access.log main;location / {root appvite; index index.html index.htm;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials true;try_files $uri $uri/ /index.html;}}# another virtual host using mix of IP-, name-, and port-based configuration##server {# listen 8000;# listen somename:8080;# server_name somename alias another.alias;# location / {# root html;# index index.html index.htm;# }#}# HTTPS server##server {# listen 443 ssl;# server_name localhost;# ssl_certificate cert.pem;# ssl_certificate_key cert.key;# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 5m;# ssl_ciphers HIGH:!aNULL:!MD5;# ssl_prefer_server_ciphers on;# location / {# root html;# index index.html index.htm;# }#}}遇到的问题
问题一找到不子应用
导致这样的问题有很多我这里只写了我是怎么解决的
原因1vue.config.js中 devServer需要加headers这个是主应用获取子应用时候的跨域响应头 原因2 子项目没有暴露出qiankun的生命周期 bootstrap mount unmount包括vite的vite.config.js的配置也要暴露出去。 原因3 在配置vite.config.js时要配置base和plugins属性base属性路径配置的不对可能和版本有关系有的是可以成功的。 原因4 子项目没有启动
问题二configuration has an unknown property ‘jsonpFunction‘
vue2 用jsonpFunction vue3 用chunkLoadingGlobal 问题三全局 __webpack_public_path__ 报错 这个是eslint校验 报错百度给出解决办法是在 package.json里添加全局变量 但是发现没有用意思我这里直接关闭了 eslint的校验就没有这个报错了不建议大家采取我的这个方法如果大家有更好的方法可以给我留言。
