Vue3 主应用目录结构※
一个基础的 Vue3主应用 项目大致是这样的
|-- index.html // 项目html模板
|-- vite.config.js // vite 配置信息
|-- package.json // 包含插件和插件集
|-- yarn.lock // 依赖包版本锁定文件
|-- public // 静态资源文件
|-- node_modules.zip // 项目的依赖压缩包，解压即可使用
|-- src // 源代码目录
|-- api // 与后端接口交互文件
|-- assets // 静态文件存放文件夹
|-- layout // 框架外层layout文件夹
|-- pinia // pinia 状态管理文件夹
|-- router // 路由配置文件夹
|-- styles // 样式文件夹
|-- utils // 公共工具函数
|-- views // 业务代码
|-- App.vue // 根节点
|-- main.js // 入口文件
|-- permission.js // 权限控制文件
Vue3 微应用目录结构※
一个基础的 Vue3微应用 项目大致是这样的
|-- index.html // 项目html模板
|-- vite.config.js // vite 配置信息
|-- package.json // 包含插件和插件集
|-- yarn.lock // 依赖包版本锁定文件
|-- public // 静态资源文件
|-- node_modules.zip // 项目的依赖压缩包，解压即可使用
|-- src // 源代码目录
|-- api // 与后端接口交互文件夹
|-- assets // 静态文件存放文件夹
|-- layout // 框架外层layout文件夹
|-- pinia // pinia 状态管理文件夹
|-- router // 路由配置文件夹
|-- styles // 样式文件夹
|-- utils // 公共工具函数
|-- views // 业务代码
|-- App.vue // 根节点
|-- main.js // 入口文件
|-- permission.js // 权限控制文件
项目基础要求※
NODE ：16.14.2及以上
NPM ：最新的即可
主应用配置手册※
安装 qiankun
yarn add qiankun # 或者 npm i qiankun -S
在主应用中注册微应用※
在主应用的入口文件中引入 qiankun 微应用框架加载微应用
// 引入微服务
import { registerMicroApps } from "qiankun";
// 接入微服务
registerMicroApps([
{
name: "flow", // 微应用 package name
entry: "http://localhost:5174/", // 微应用 要跨域 fetch 微应用部署地址
container: "#subApp", // 微应用挂载节点
activeRule: "#/flow-graph", // 微应用激活路径
props:{
router // 微应用 props 里接收到的参数
}
},
]);在 src/layout/Index.vue 文件中引入 qiankun 启动方法 启动微应用
// 引入 start 启动方法
import { start } from "qiankun";
export default {
components: {
Aside,
Header,
TagsView,
},
setup() {
const store = useStore();
const { theme , isCollapse} = storeToRefs(store);
onMounted(() => {
// 调用启动微应用方法
start();
});
return {
theme,
isCollapse
};
},
};如果微应用不是直接跟路由关联的时候，你也可以选择手动加载微应用的方式
import { loadMicroApp } from 'qiankun'; // 引入手动加载方法
loadMicroApp({
name: 'developManage', // 微应用 package name
entry: 'http://27.196.10.156:8090/', // 微应用 要跨域 fetch 微应用部署地址
container: '#pub_micao_wrap', // 微应用挂载节点
});微应用配置※
Vite 打包工具需要依赖插件 vite-plugin-qiankun 来实现微应用的配置
安装 vite-plugin-qiankun※
yarn add vite-plugin-qiankun # npm i vite-plugin-qiankun -S
配置微应用支持 qiankun※
需要在 vite.config.js 中配置以下信息
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 乾坤
import qiankun from "vite-plugin-qiankun";
export default defineConfig({
base: "http://localhost:5174/",
server: {
port: 5174,
cors: true,
origin: "http://localhost:5174",
headers: {
"Access-Control-Allow-Origin": "*", // 微应用 server 的跨域设置
},
},
plugins: [
vue(), // 引入对 Vue 的支持
qiankun("flow", { // 引入对 qiankun 的支持 其中 ‘flow’ 为项目名称
useDevMode: true,
}),
]
});在入口文件 main.js 中配置以下信息 以支持 qiankun 微应用固定模式照写就好
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
// 乾坤
import {
renderWithQiankun,
qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";
// ElementPlus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
let app;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
createApp(App).use(router).use(ElementPlus).mount("#app");
} else {
renderWithQiankun({
mount(props) {
app = createApp(App).use(router).use(ElementPlus);
// 挂载全局父应用Router
if (props.router) {
app.config.globalProperties.parentRouter = props.router;
}
app.mount(
props.container
? props.container.querySelector("#app")
: document.getElementById("app")
);
},
bootstrap() {
console.log("--bootstrap");
},
update() {
console.log("--update");
},
unmount() {
console.log("--unmount");
app?.unmount();
},
});
}项目开发要修改的信息※
api/request.js※
const publicIp = "http://27.196.10.177:18080"; // 修改后端网关地址
const service = axios.create({
baseURL: publicIp,
timeout: 1800000, // 前端请求超时时间设置
}); vite.config.js※
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 配置静态资源访问
import path from "path";
export default defineConfig(() => {
return {
port: 5173, // 本地应用端口
base: "./",
server: {
proxy: { // 代理配置
"/api": {
target: "http://localhost:9999",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
//配置需要使用的插件列表
plugins: [
vue()
]
};
});
