微前端搭建记录

最新推荐文章于 2025-03-10 09:28:36 发布

Beam007

最新推荐文章于 2025-03-10 09:28:36 发布

阅读量1.9k

点赞数 4

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/112839397

版权

本文详细记录了使用qiankun搭建微前端的过程，包括主项目和子项目的创建、配置vue.config.js、修改路由为history模式，以及解决样式隔离、全局变量监听等问题，并提供了相关参考文章和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主项目的搭建

一、创建主项目

vue create hello-main

二、安装qiankun

npm install qiankun --save
（注意：子项目无需安装qiankun）

其他常用组件的安装：
npm install jsencrypt --save
npm install element-ui --save
npm install axios --save

三、创建vue.config.js配置对外访问的端口号

module.exports = {
  devServer: {
    host: '0.0.0.0', // 配置localhost会无法使用IP访问
    port: 8090,
    open: true
  }
}

然后可以启动项目了npm run serve，如果发现报错有些依赖包找不到需要安装，可以直接执行npm install即可。

四、修改主项目文件

4.1、main.js文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { registerMicroApps, start } from 'qiankun'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app') // 主应用的入口 对应index.html文件中的id

registerMicroApps([
  /* name: 微应用的名称，微应用之间必须确保唯一
  entry: 表示微应用的访问地址
  container: 微应用挂在到哪个容器下
  activeRule: 微应用的激活规则 */
  {
    name: 'vueApp',
    entry: '//localhost:8091',
    container: '#subContainer', // 子应用挂在id为subContainer的div下
    activeRule: '/app-vue'
  }
])
// 启动 qiankun
start()

注意：
1)、$mount(’#app’)是主应用的入口，对应index.html文件中的id。
2)、注册子应用配置中
name: 属性不一定要和子项目保持一致，仅是一个name标识，保持唯一即可。
entry：是子项目的访问地址和端口。
container：子应用应该挂在到主应用的哪个div下！！！这个不要忽视。
activeRule：中的url标识，一定要和子项目中配置的拦截到对应子项目的标识保持一致。

4.2、修改index.html文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to cont

最低0.47元/天解锁文章