vue 多个项目之间怎么互相引入、乾坤框架的使用
需求分析:需要将不同系统的页面集成到我们的系统上,并且实现页面样式的统一,由于是外部资源引入项目中目前有两种实现方式
iframe、和乾坤架构,虽然是两种实现的方式,但是因为是好多个系统用的框架、ui样式风格都不相同,我们要想实现样式统一只有去修改样式
1. Iframe的方式访问
由第三方提供网络链接,然后用iframe去接收的方式去修改iframe内部的标签样式。
首先明确一点,每个iframe里各自维护自己的全局window对象
另外明确一点,只有同域才能进行iframe之间的读改写,跨域时,只能进行简单的路由跳转。
修改样式实现方式
一.同域
如果不存在跨域的问题时可以通过这种方式去实现修改iframe内部的样式
方式一 : 这种是通过js的方式去修改
document.getElementById('if').onload = function () {
let iframeDocument = document.getElementById('if').contentDocument || document.getElementById('if').contentWindow.document
// 修改body背景色为红色
iframeDocument.body.style.backgroundColor = "black";
// 修改ul的字体颜色为蓝色
iframeDocument.getElementsByClassName('ul')[0].style.color = 'blue'
console.log(iframeDocument)
}
对于每个系统的 统一的样式可以去写一个js公用方法去修改样式文件实现统一修改,个性化的 样式就要单独的去修改样式
例子:
// 如果多个页面之间的class需要修改成同样式那么可以把这个样式封装为一个方法去调用
mounted () {
let that = this
document.getElementById('if').onload = function () {
let iframeDocument = document.getElementById('if').contentDocument || document.getElementById('if').contentWindow.document
that.changStyle (iframeDocument)
}
},
methods: {
changStyle (iframeDocument) {
// 修改body背景色为红色
iframeDocument.body.style.backgroundColor = "black";
// 修改ul的字体颜色为蓝色
iframeDocument.getElementsByClassName('ul')[0].style.color = 'blue'
}
}
方式二 在iframe的head中插入样式表
// 页面上有一个id为i1的iframe,它嵌入的是同源的文件 child.html
<iframe id="i1" src="./child.html" frameborder="0" width="100%" height="400"></iframe>
// 借助jQuery在iframe加载后,向其内部插入style.css
$('#i1').load(function () {
let cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
$('#i1')
.contents().find("head")
.append($('<link rel="stylesheet" type="text/css" href="style.css">')
);
});
// style.css
body {
background-color: aqua;
}
二.跨域
用Nginx反向代理解决跨域
缺点:
-
需要很大的工作量去修改样式,大部分样式无法统一修改
-
iframe去加载页面相对来说会导致页面比较慢
-
有些样式权重过高可能修改覆盖不了
2. 乾坤框架
*注意点:* *node版本是 v14.17.0**,**vue-cli的版本 ,* *我的**例子是3.11.0*
1、乾坤的适用场景:
1.1 目标系统的前端框架也使用了乾坤架构,并且乾坤架构的版本和e基建2.0处在同一个大版本下
2、创建乾坤主应用
2.1 vue create XXX 搭建一个前端项目,记得添加router
2.2 安装乾坤依赖
yarn add qiankun 或者 npm i qiankun
2.3 在入口文件main.js中注册子应用
import { registerMicroApps, start } from "qiankun";
// 在主应用中注册子应用
registerMicroApps([
{
name: "vueApp", //子应用名称
entry: "//localhost:8081", //子应用启动的地址
container: "#container", // 子应用在主应用的容器名称
activeRule: "/app-vue", // 路由地址
props: {
data: "child子应用",
}, //传参
},
{
name: "vueApp2", //子应用名称
entry: "//localhost:8082", //子应用启动的地址
container: "#container2", // 子应用在主应用的容器名称
activeRule: "/testapp", // 路由地址
props: {
data: "child子应用",
}, //传参
},
]);
// 启动
start();
2.4 主应用配置跨域,项目根目录下创建 vue.config.js
module.exports = {
transpileDependencies: true,
devServer: {
port: 8080, //主应用启动端口号,视情况而定
headers: {
"Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面
},
},
}
2.5 在主应用中注册一个路由,默认路径为 /
2.6 主应用的App.vue中,写入跳转信息
<div id="app">
<router-link to="/">产品化</router-link>
<router-link to="/testapp">个性化1</router-link>
<router-link to="/app-vue">个性化2</router-link>
<router-view />
<div id="container"></div>
<div id="container2"></div>
</div>
id为container和container2的两个盒子,分别为两个子应用的容器
3.子应用创建
3.1 vue create XXX , 记得添加路由
3.2 在src文件夹下新建public-path.js,代码如下
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
3.3 在入口文件main.js中添加代码
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import './public-path'
Vue.config.productionTip = false;
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
render: (h) => h(App),
}).$mount(container ? container.querySelector("#app-vue") : "#app-vue");
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log("bootstraped");
}
export async function mount(props) {
console.log("mount");
render(props);
}
export async function unmount() {
console.log("unmount")
instance.$destroy();
instance.$el.innerHTML = "";
instance = null;
}
new Vue({
router,
render: (h) => h(App),
}).$mount("#app-vue");
3.4 配置子应用跨域,项目根目录下新建vue.config.js
const { name } = require("./package");
module.exports = {
transpileDependencies: true,
devServer: {
port: 8081, //子应用启动端口号,不可随意修改,与上文中父应用注册的子应用端口号对应
headers: {
"Access-Control-Allow-Origin": "*", //循序跨域
},
},
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: "umd", // 把微应用打包成 umd 库格式
// jsonpFunction: `webpackJsonp_${name}`,
},
},
};
3.5 路由配置,在src/router/index.js 中,修改代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
const router = new VueRouter({
// 这里和主应用中注册子应用时的activeRule对应
base: window.__POWERED_BY_QIANKUN__ ? "/app-vue" : "/",
mode: "history",
routes,
});
export default router
3.6 将项目中index.html 和App.vue中的id 都改为 app-vue
注意:
1、 主应用的路由、app.vue的id,应该和注册的子应用的路由、id不同
2、 子应用中app.vue和index.html中的id记得修改并保持一致
3、 本地运行时,将主、子应用都跑起来,注意端口号
4. 乾坤框架修改样式
默认情况下直接在主应用操作子应用的class属性直接就能修改样式
5.缺点
4.修改样式会操作一堆的class,这样会影响其他的页面或其他子应用的样式
总结
两种方式各有优缺点,但是要想实现样式统一肯定要去修改代码的,区别就在于是在我们的代码里改,还是在他们的代码里改