微前端搭建记录

最新推荐文章于 2024-05-06 18:22:25 发布

Beam007

最新推荐文章于 2024-05-06 18:22:25 发布

阅读量1.8k

点赞数 4

分类专栏： vue

本文链接：https://blog.csdn.net/Beam007/article/details/112839397

版权

主项目的搭建

一、创建主项目

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 continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files wi

最低0.47元/天解锁文章

Beam007

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
8
评论
微前端搭建记录

主项目的搭建一、创建主项目vue create hello-main二、安装qiankunnpm install qiankun --save（注意：子项目无需安装qiankun）其他常用组件的安装：npm install jsencrypt --savenpm install element-ui --savenpm install axios --save三、创建vue.config.js配置对外访问的端口号module.exports = { devServer: {
复制链接

扫一扫