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

wujie vite vue3

news 来源：原创 2025/5/9 21:57:05

文章目录

- 简介
- 主应用 vite vue3
- - 改造main.ts
  - 改造indx.html
  - 创建hostMap
  - 创建路由
  - 创建两个组件`Vue3View` 和` Vue3SubViewVue `
- wujie 子应用 vite vue3
- - 改造main.ts
  - 改造index.html
  - 改造App.vue
  - 改造vite.config
- 打包发布

简介

本文主要介绍微前端框架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有包含关系，就更新当前path
    if (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) => {
    // 生产环境 开发环境区分host
    if (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/