大学生网站设计,孝感网站建设软件,动漫毕业设计作品网站,国外设计师个人网站先说一下项目需求#xff1a;将单独的四套系统的登录操作统一放在一个入口页面进行登录#xff0c;所有系统都使用的是vue3#xff0c;#xff08;不要问我为啥会这样设计#xff0c;产品说的客户要求#xff09; 1.主系统下载wujie
我全套都是vue3#xff0c;所以直接…先说一下项目需求将单独的四套系统的登录操作统一放在一个入口页面进行登录所有系统都使用的是vue3不要问我为啥会这样设计产品说的客户要求 1.主系统下载wujie
我全套都是vue3所以直接下vue3的
npm i wujie-vue3 -S
不知道官网为什么要把下载依赖单独放这里。。。
官网地址Vue组件封装 | 无界 2.主系统的main.js中引入wujie
// 导入 WuJie.js 的 Vue3 集成
import WujieVue from wujie-vue3;
const { bus, setupApp, preloadApp, destroyApp } WujieVue;// 配置子系统入口
setupApp({name: sub-app,url: http://localhost:8081, // 子应用的 URLattrs: {src: http://localhost:8081,},
});const app createApp(App)
app.use(WujieVue);
app.mount(#app) 3.配置子应用入口页面路由并且新建这个页面
router.js文件 新建页面路径 4.pre.vue页面代码
templatediv classpreWujieVuewidth100%height100%:nameappName:urlappUrl:synctrue:propsappProps:attrsappAttrs:alivetrue//div
/templatescript setup
import { computed } from vue;
import { useRoute } from vue-router;
import WujieVue from wujie-vue3;
// 动态获取路由参数匹配子应用
const appName /pre;
const appUrl http://localhost:8081;
const appProps { user: admin };
const appAttrs { data-custom-attr: example }; // 自定义属性
/scriptstyle langscss scoped
.pre{height: 100%;
}
/style
主应用已经配置好了接下来是子应用
打开子应用的vite.config.js文件
origin和上面主应用的appUrl要一样开启允许跨域
server: {cors: true, // 允许跨域port: 8081,// host: true,host: 0.0.0.0, // 确保可以通过 IP 访问origin: http://localhost:8081, // 子应用的访问地址与主应用匹配对应appUrlopen: true,headers: {Access-Control-Allow-Origin: *, // 明确允许主应用跨域访问},proxy: {// https://cn.vitejs.dev/config/#server-proxy/dev-api: {target: http://localhost:8080,changeOrigin: true,rewrite: (p) p.replace(/^\/dev-api/, )}}},
done
