vue3+qiankun项目搭建_qiankun vue3创建路由，面试前端工程师会问到那些问题

https://qiankun.umijs.org/zh

官网上对vue3并没有搭建的支持。以下分几步解决这个问题。

vue3项目搭建

需依次搭建两个项目，分别作为主应用和子应用。（main-qiankun、other-qiankun）


选择默认Vue3模板即可。

qiankun及依赖项引入

npm install qiankun -S   
npm install vuex@4
npm install vue-router

主应用配置

路由配置

import { createRouter, createWebHistory } from "vue-router";

const home = () => import("../home")
const login = () => import("../login")

const routes = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component: home
  },
  {
    path: "/login",
    name: "login",
    component: login
  }
]

export const router = createRouter({
  history: createWebHistory(),//createWebHashHistroy()路由路径带＃
  routes: routes
})

export default router

qiankun配置

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import { registerMicroApps, start } from "qiankun";
const app = createApp(App)
app.use(router).mount('#app')

// 在主应用中注册子应用
registerMicroApps([
  {
    name: "child", //子应用名称
    entry: "//localhost:30000", //子应用启动的地址
    container: "#vue3-demo", // 子应用在主应用的容器名称-对应app.vue中
    activeRule: "/child", // 路由地址-路由跳转到该地址则采用qiankun匹配
    props: {
      data: "child子应用",
    }, //传参
  },
]);
// 启动
start();

跨域配置

• vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 30001, //主应用启动端口号，视情况而定
    headers: {
      "Access-Control-Allow-Origin": "\*", // 允许跨域访问子应用页面
    },
  },
})

子应用配置

路由配置

import {
  createRouter,
  createWebHistory
} from 'vue-router'
import '../public-path' // 引入public-path文件
const router = createRouter({
  base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/', // qiankun进入子应用时，返回true
  history: createWebHistory(), // 不带#
  routes: [{
    path: '/',
    redirect: '/child'
  },
  {
    path: '/child',
    component: () => import('@/components/child')    //绑定一个child组件
  }
  ]
})
export default router

qiankun配置

• src路径下添加public-path.js

// eslint-disable-next-line no-undef
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

• main.js抛出生命周期钩子

import './public-path'; // 注意需要引入public-path
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
let instance = null;

function render({ container } = {}) {
  instance = createApp(App);
  instance.use(router);
  instance.use(store);
  instance.mount(container ? container.querySelector('#app') : '#app');//app.vue有对应的div
}


// 如何独立运行微应用？
#### 总结

*   对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。



*   算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）

*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。



*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/edf995b9ddba4c1cbccb0ab90d270c5b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1752050035&x-signature=cmX6ZO913tGvE%2BU7VeUHIncORxg%3D)



第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**