微信公众 号平台官网搜索引擎优化的简称是

简介

本文主要介绍微前端框架wujie的使用，这是一个初步的框架搭建版本，主应用是vite vue3 子应用同样也是vite vue3 ，后续会添加更多的子应用到项目中。

然后通过我自己的域名http://dxui.cn的子域名来进行发布，涉及到宝塔面板的使用和跨域Lunix的跨域配置

主应用 vite vue3

// 先安装vite 版的vue3
yarn create vue
// 安装子应用需要的显示框架
yarn add wujie-vue3
// wujie框架本身需要的依赖
yarn add wujie

改造main.ts

import './assets/main.css'
import lifecycles from "./lifecycle";
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import WujieVue from "wujie-vue3";
import credentialsFetch from "./fetch.ts";
// import plugins from './plugins.ts';import App from './App.vue'
import router from './router'
import hostMap from "./hostMap";
// declare const process: any;const app = createApp(App)
// const isProduction = process?.env.NODE_ENV === "production";
const { setupApp, preloadApp, bus } = WujieVue;
// const attrs = isProduction ? { src: hostMap("//localhost:8080") } : {};
const props = {jump: (name: string) => {router.push({ name });},
};// 在主应用注册后，子应用会触发 sub-route-change 事件,告诉主应用当前子应用的路由
bus.$on("sub-route-change", (name: string, path: string) => {const mainName = `${name}`;const mainPath = `/${name}${path}`;const currentName = router.currentRoute.value.name as string;const currentPath = router.currentRoute.value.path as string;// 只要主应用和子应用都是的mianName有包含关系，就更新当前pathif (currentName.includes(mainName) && mainPath !== currentPath) {router.push({ path: mainPath });}
});if (import.meta.env.DEV) {console.log('开发环境');
} else if (import.meta.env.PROD) {console.log('生产环境');
}setupApp({name: "wujie-vue3",url: hostMap("//localhost:8000"),// attrs,exec: true,props,alive: true,// fetch: credentialsFetch,// plugins,// degrade,...lifecycles,fetch: (url: any, options) =>url.includes(hostMap("//localhost:8000")) ? credentialsFetch(url, options) : window.fetch(url, options),
});app.use(createPinia())
app.use(router)
app.use(WujieVue)app.mount('#wujie-main')

改造indx.html

主要是将app挂在的id改为wujie-main,以免后续扩展出现重复

创建hostMap

主要用来区分 开发环境额生产环境的url不同

const hostUrlMap: any = {'//localhost:8000': '//wujie-sub-vue3.dxui.cn'
}declare const process: any;const hostMap = (url: string) => {// 生产环境 开发环境区分hostif (import.meta.env.DEV) {return url;} else if (import.meta.env.PROD) {return hostUrlMap[url];}
}export default hostMap;

创建路由

import { createRouter, createWebHistory } from 'vue-router'
import Vue3View from '../views/Vue3View.vue'
import Vue3SubViewVue from '@/views/Vue3SubView.vue'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',redirect: '/vue3',},{path: '/vue3',name: 'vue3',component: Vue3View,},{path: '/vue3/:path',name: 'vue3-sub',component: Vue3SubViewVue,},{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('../views/AboutView.vue'),},],
})export default router

创建两个组件Vue3View 和Vue3SubViewVue

<script setup lang="ts">
import { ref } from 'vue'
import WuJieVue from 'wujie-vue3'
import hostMap from '../hostMap'
const wujieVue3Url = ref(hostMap('//localhost:8000'))
</script><template><main><WuJieVue width="100%" height="100%" name="wujie-vue3" :url="wujieVue3Url"></WuJieVue></main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import WuJieVue from 'wujie-vue3'
import hostMap from '../hostMap'
const router = useRouter()
const wujieVue3Url = ref(hostMap('//localhost:8000') + router.currentRoute.value.path)
</script><template><main><WuJieVue width="100%" height="100%" name="wujie-vue3" :url="wujieVue3Url"></WuJieVue></main>
</template>

到这里主应用的改造就基本完成了

wujie 子应用 vite vue3

// 先安装vite 版的vue3
yarn create vue

改造main.ts

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)if ((window as any).__POWERED_BY_WUJIE__) {(window as any).__WUJIE_MOUNT = () => {app.mount('#wujie-vue3')};(window as any).__WUJIE_UNMOUNT = () => {app.unmount()};} else {app.mount('#wujie-vue3')
}

改造index.html

将挂载的id改为wujie-vue3,避免多个子应用时出现重复

改造App.vue

<script setup lang="ts">
import { watch } from 'vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.path,() => {;(window as any)?.$wujie?.bus?.$emit('sub-route-change', 'vue3', route.path)},
)
</script><template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView />
</template><style scoped>
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}
</style>

改造vite.config

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),// vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},// 改造端口，与主应用配置的hostMap关联server: {port: 8000,headers: {// 避免开发环境出现跨域问题'Access-Control-Allow-Origin': '*',},}
})

打包发布

分别对主应用和子应用，通过yarn build进行打包，一个改为wujie 一个改变wujie-sub-vue3

宝塔面板 控制页面
https://47.121.121.207:15300/

对dxui.cn添加域名解析*.dxui.cn

然后在宝塔面板配置wujie.dxui.cn和wujie-sub-vue3.dxui.cn

配置wujie主应用到 wujie.dxui.cn
配置wujie-sub-vue3子应用到 wujie-sub-vue3.dxui.cn

配置成功后就可以请求了，但出现了跨域的问题

宝塔面板Liunx对wujie-sub-vue3.dxui.cn移除跨域配置

server
{listen 80;server_name wujie-sub-vue3.dxui.cn;index index.php index.html index.htm default.php default.htm default.html;root /www/wwwroot/wujie-sub-vue3;#CERT-APPLY-CHECK--START# 用于SSL证书申请时的文件验证相关配置 -- 请勿删除include /www/server/panel/vhost/nginx/well-known/wujie-sub-vue3.dxui.cn.conf;#CERT-APPLY-CHECK--END#SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则#error_page 404/404.html;#SSL-END#ERROR-PAGE-START  错误页配置，可以注释、删除或修改error_page 404 /404.html;#error_page 502 /502.html;#ERROR-PAGE-END#PHP-INFO-START  PHP引用配置，可以注释或修改include enable-php-00.conf;#PHP-INFO-END#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效include /www/server/panel/vhost/rewrite/wujie-sub-vue3.dxui.cn.conf;#REWRITE-END#禁止访问的文件或目录location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md){return 404;}#一键申请SSL证书验证目录相关设置location ~ \.well-known{allow all;}#禁止在证书验证目录放入敏感文件if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {return 403;}location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${expires      30d;error_log /dev/null;access_log /dev/null;}location ~ .*\.(js|css)?${expires      12h;error_log /dev/null;access_log /dev/null;add_header 'Access-Control-Allow-Origin' '*';  add_header 'Access-Control-Allow-Methods' 'GET';  add_header 'Access-Control-Max-Age' '86400';}access_log  /www/wwwlogs/wujie-sub-vue3.dxui.cn.log;error_log  /www/wwwlogs/wujie-sub-vue3.dxui.cn.error.log;location / {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Access-Control-Allow-Headers' '';add_header 'Access-Control-Max-Age' '86400';add_header 'Content-Type' 'text/plain; charset=utf-8; text/css; application/javascript';add_header 'Content-Length' 0;return 204;}if ($request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Access-Control-Allow-Headers' '';add_header 'Access-Control-Expose-Headers' '';}if ($request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Access-Control-Allow-Headers' '';add_header 'Access-Control-Expose-Headers' '';}}
}

wujie 主应用 http://wujie.dxui.cn/
wujie 子应用单独部署 http://wujie-sub-vue3.dxui.cn/