网站怎么做反向代理照片制作软件

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

网站怎么做反向代理,照片制作软件,手机软件app,搜索引擎大全入口主应用#xff1a;Vue3Webpack 1、创建主应用#xff1a; npx vue create main-vue3-app 2、安装qiankun npx yarn add qiankun 3、项目中使用的vue、vue-router、qiankun依赖如下#xff0c;webpack版本为5.x 4、在根目录下创建vue.config.js const { defineConfig }…主应用Vue3Webpack 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 const { defineConfig } require(vue/cli-service); const packageName require(./package.json).name; module.exports defineConfig({lintOnSave: false,devServer: {// 可以在配置中 配置端口 VUE_APP_PORT 8080port: 8080,headers: {Access-Control-Allow-Origin: * // 允许跨域访问子应用页面}} }) 5、入口组件App.vue templatenavrouter-link to/Home/router-link |router-link to/vue2-webpack-appwepbackvue2App/router-link |router-link to/vue3-vite-appvitevue3App/router-link |router-link to/vue3-webpack-appwepbackvue3App/router-link |router-link to/react-webpack-appwepbackreactApp/router-link /navrouter-view/ /templatestyle #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50; }nav {padding: 30px; }nav a {font-weight: bold;color: #2c3e50; }nav a.router-link-exact-active {color: #42b983; } /style6、然后创建微应用对应的路由页面以及注册微应用 router.ts import { createRouter, createWebHistory, RouteRecordRaw } from vue-routerconst routes: ArrayRouteRecordRaw [{path: /,name: index,component: () import(../views/Index.vue)},{path: /vue2-webpack-app/:chapters,name: vue2-webpack-app,component: () import(../views/Vue2App.vue)},{path: /vue3-vite-app/:chapters,name: vue3-vite-app,component: () import(../views/ViteApp.vue)},{path: /vue3-webpack-app/:chapters,name: vue3-webpack-app,component: () import(../views/Vue3App.vue)},{path: /react-webpack-app/:chapters,name: react-webpack-app,component: () import(../views/ReactWebpack.vue)} ]const router createRouter({history: createWebHistory(),routes })export default router微应用Vue2Webpack 1、在主应用下创建对应的路由页面 views/Vue2App.vue templatediv idvue2-webpack-app/ /templatescript setup langts import { onMounted, ref } from vue; import { registerMicroApps, start } from qiankun;const loading ref(false); registerMicroApps([{name: vue2-webpack-app,entry: //localhost:8081/,container: #vue2-webpack-app,activeRule: /vue2-webpack-app,} ]); onMounted(() {if (!window[qiankunStarted]) {window[qiankunStarted] true;start();} }); /scriptstyle scoped/style 2、创建vue2webpack项目选2.x版本 npx vue create vue2-app 3、项目中使用的vue、vue-router依赖如下webpack版本为5.x 4、在根目录下创建vue.config.js const { defineConfig } require(vue/cli-service); const packageName require(./package.json).name; module.exports defineConfig({lintOnSave: false,devServer: {// 可以在配置中 配置端口 VUE_APPPORT 8080port: 8081,headers: {Access-Control-Allow-Origin: * // 允许跨域访问子应用页面}},configureWebpack: {output: {library: ${packageName}-[name],libraryTarget: umd,chunkLoadingGlobal: webpackJsonp\({packageName},},} }) 5、在src根目录下创建public-path.js if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ }6、router/index.ts import Vue from vue import VueRouter from vue-router import IndexVue from ../views/Index.vueVue.use(VueRouter)const routes [{path: /,name: index,component: IndexVue// component: () import( /views/Index.vue)}, ] console.log(window.__POWERED_BY_QIANKUN__) const router new VueRouter({mode: history,base: window.__POWERED_BY_QIANKUN__ ? /vue2-webpack-app : /,routes })export default router7.入口文件main.ts/main.js import Vue from vue import App from ./App.vue import router from ./router; import ./public-pathVue.config.productionTip false let instance:any null;function render(props:any {}) {const { container } propsinstance new Vue({name: root,router,render: h h(App)}).\)mount(container ? container.querySelector(#app) : #app)}if (!window.POWERED_BY_QIANKUN) {render() } /**

• bootstrap 只会在微应用初始化的时候调用一次下次微应用重新进入时会直接调用 mount 钩子不会再重复触发 bootstrap。
• 通常我们可以在这里做一些全局变量的初始化比如不会在 unmount 阶段被销毁的应用级别的缓存等。 */ export async function bootstrap() {console.log(vue2webpack bootstraped); }/**
• 应用每次进入都会调用 mount 方法通常我们在这里触发应用的渲染方法 */ export async function mount(props:unknown) {// ReactDOM.render(App /, props.container ? props.container.querySelector(#root) : document.getElementById(root));console.log(乾坤子应用容器加载完成开始渲染 child)console.log(props from main mount, props)render(props) }/**
• 应用每次 切出/卸载 会调用的方法通常在这里我们会卸载微应用的应用实例 */ export async function unmount() {instance?.$destroy();}/**
• 可选生命周期钩子仅使用 loadMicroApp 方式加载微应用时生效 */ export async function update(props:unknown) {console.log(update props, props); } 微应用Vue3Wepback 1、在主应用下创建对应的路由页面 views/Vue3App.vue templatediv idvue3-webpack-app / /templatescript setup langts import { onMounted, ref } from vue; import { registerMicroApps, start } from qiankun;const loading ref(false); registerMicroApps([{name: vue3-webpack-app,entry: //localhost:8082/,container: #vue3-webpack-app,activeRule: /vue3-webpack-app,} ]); onMounted(() {if (!window[qiankunStarted]) {window[qiankunStarted] true;start({prefetch:false,sandbox:{experimentalStyleIsolation:true}});} }); /scriptstyle scoped/style 2、创建vue3webpack项目选3.x版本 npx vue create vue3-webpack-app 3、项目中使用的vue、vue-router依赖如下webpack版本为5.x 4、在根目录下创建vue.config.js const { defineConfig } require(vue/cli-service); const packageName require(./package.json).name; const path require(path); module.exports defineConfig({lintOnSave: false,devServer: {// 可以在配置中 配置端口 VUE_APPPORT 8080port: 8082,headers: {Access-Control-Allow-Origin: * // 允许跨域访问子应用页面}},configureWebpack: {output: {library: ${packageName}-[name],libraryTarget: umd,chunkLoadingGlobal: webpackJsonp${packageName},},resolve:{alias:{:path.join(dirname,src)}}} }) 5、在src根目录下创建public-path.js if (window.POWERED_BY_QIANKUN) {webpack_public_path__ window.INJECTED_PUBLIC_PATH_BY_QIANKUN }6、router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from vue-router import IndexView from ../views/Index.vueconst routes: ArrayRouteRecordRaw [{path: /,name: index,component: IndexView// component: () import(../views/Index.vue)} ]const router createRouter({history: createWebHistory(window.POWERED_BY_QIANKUN?/vue3-webpack-app:process.env.BASE_URL),routes })export default router7.入口文件main.ts/main.js import { createApp } from vue import App from ./App.vue import router from ./router import ./public-pathlet app: any null function render(props: any {}) {app createApp(App)const { container } propsapp.use(router).mount(container ? container.querySelector(#app) : #app) }if (!window.POWERED_BY_QIANKUN) {render() }export async function bootstrap() {console.log(vue3webpack bootstraped); }/**
• 应用每次进入都会调用 mount 方法通常我们在这里触发应用的渲染方法 */ export async function mount(props: unknown) {// ReactDOM.render(App /, props.container ? props.container.querySelector(#root) : document.getElementById(root));console.log(乾坤子应用容器加载完成开始渲染 child)console.log(props from main mount, props)render(props) }/**
• 应用每次 切出/卸载 会调用的方法通常在这里我们会卸载微应用的应用实例 */ export async function unmount() {console.log(unmount——————-)app.unmount()app null}/**
• 可选生命周期钩子仅使用 loadMicroApp 方式加载微应用时生效 / export async function update(props: unknown) {console.log(update props, props); }微应用Vue3Vite 1、在主应用下创建对应的路由页面 views/ViteApp.vue templatediv idvue3-vite-app / /templatescript setup langts import { onMounted, ref } from vue; import { registerMicroApps, start } from qiankun;const loading ref(false); registerMicroApps([{name: vue3-vite-app,entry: //localhost:5173/,container: #vue3-vite-app,activeRule: /vue3-vite-app,} ]); onMounted(() {if (!window[qiankunStarted]) {window[qiankunStarted] true;start();} }); /scriptstyle scoped/style 2、创建vue3vite项目 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使用 import { defineConfig } from vite import vue from vitejs/plugin-vueimport qiankun from vite-plugin-qiankun; // https://vitejs.dev/config/ export default defineConfig({plugins: [vue() ,qiankun(vue3-vite-app, {useDevMode: true}),],})5、router/index.ts import { createRouter, createWebHistory } from vue-router import {qiankunWindow } from vite-plugin-qiankun/dist/helper;const router createRouter({history: createWebHistory(qiankunWindow.POWERED_BY_QIANKUN ? /vue3-vite-app : /),routes: [{path: /,name: index,component: () import(/ webpackChunkName: index */ ../views/Index.vue)}] })export default router6、在src根目录下创建public-path.js if (window.POWERED_BY_QIANKUN) {webpack_public_path window.INJECTED_PUBLIC_PATH_BY_QIANKUN }7、main.ts import { createApp } from vue import ./public-pathimport App from ./App.vue import router from ./routerimport {renderWithQiankun,qiankunWindow} from vite-plugin-qiankun/dist/helper;let app:any;if (!qiankunWindow.POWERED_BY_QIANKUN) {createApp(App).use(router).mount(#app);} else {renderWithQiankun({mount(props) {console.log(–mount);console.log(props)app createApp(App);app.use(router).mount((props.container? props.container.querySelector(#app): document.getElementById(app)) as Element);},bootstrap() {console.log(–bootstrap);},update() {console.log(–update);},unmount() {console.log(–unmount);app?.unmount();}});} 微应用React 18Webpack 1、在主应用下创建对应的路由页面 views/ReactWebpack.vue templatediv idreact-webpack-app/ /templatescript setup langts import { onMounted, ref } from vue; import { registerMicroApps, start } from qiankun;const loading ref(false); registerMicroApps([{name: react-webpack-app,entry: //localhost:3000/,container: #react-webpack-app,activeRule: /react-webpack-app,} ]); onMounted(() {if (!window[qiankunStarted]) {window[qiankunStarted] true;start();} }); /scriptstyle scoped/style 2、创建ReactWebpack项目 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 import React from reactimport Home from ../views/home // 导入路由依赖 import { Route,Routes} from react-router-domexport default function Router(){return (// 使用BrowserRouter包裹配置路由Routes Route element{Home/} path//Route/Routes) } 6、在App.jsx中引入路由组件 import Router from ./router/index import ./App.css; function App() {return (divRouter/Router/div); } export default App; 7、index.js入口 import React from react; import ReactDOM from react-dom/client; import { BrowserRouter } from react-router-dom import ./index.css; import App from ./App; import ./public-path; import reportWebVitals from ./reportWebVitals; // let root createRoot(document.querySelector(#root)) let root null; function render (props) {const { container } props;root root || ReactDOM.createRoot(container ? container.querySelector(#root) : document.getElementById(root) );root.render(BrowserRouter basename{window.POWERED_BY_QIANKUN ? /react-webpack-app : /}React.StrictModeApp //React.StrictMode/BrowserRouter); }if (!window.POWERED_BY_QIANKUN) {render({}); }export async function bootstrap () {console.log([react18] react app bootstraped); }export async function mount (props) {console.log([react18] props from main framework, props);render(props); }export async function unmount (props) {root.unmount();root null; }reportWebVitals();演示 待上传 完整代码 待上传