Vue搭建微前端

Category : 工具 Views : 7628 Comments : 1 Posted on : 2020-09-11

设计方案

该方案是使用webpack代理的方法实现，在生产环境可以使用nginx代理，达到微前端的目的。

具体实现

子项目
子项目和父项目的Vue实例与index.html共享，所以不再需要html文件和vue。子项目主要是挂载自己的路由到父项目去，因为父子项目都在同一个Vue实例，所以我们只需要把子项目的路由挂载到Vue实例上去，父项目就可以获取子项目的路由并挂载到自己的路由里去。这里子项目的路由为数组，并不是Vue的路由实例。

路由文件： /src/router/index.js

export default [
  {
    path: "/a",
    component: () => import("@/views/login/index.vue")
  },
  {
    path: "/b",
    component: () => import("@/views/home/index.vue")
  },
];

这里主要是定义路由地址和组件地址，下面开始把路由挂载到Vue实例上面
主要打包文件main.js： /src/main.js

import Vue from "vue";
import router from './router'

const shareRouter = (Vue.__shareRouter__ = Vue.__shareRouter__ || {})
shareRouter["chilrenRouter"] = router

这里把刚刚定义的路由挂载到Vue.shareRouter上面，在父项目的Vue上面可以读取到子项目的路由。
然后再到webpack配置里去修改打包出口地址、host和port。
webpack配置文件： wepack.config.js(这里我挑重要的发)

module.exports = {
  mode: "development",
  entry: "./src/main.js",//入口文件
  output: {
    publicPath: '/chilrenProject/',//打包出口路径
    filename: "main.js" //打包出口文件名
  },
  externals: {
    'vue': 'Vue' //设置Vue不打包，父项目使用cdn引入vue，使父子项目处于同一个实例
  },
  devServer: {
    contentBase: false,
    hot: true,
    host: "127.0.0.1",
    compress: true,
    port: 8089,
    inline: true
  },
}

这里可以看到，子项目的运行地址为http://127.0.0.1:8089，然后就可以运行子项目了。

父项目
首先，要和子项目共享Vue实例，这里就不能把Vue打包，我这里使用了CDN引入了Vue。然后就是怎么建立父子项目的通信了，这里我使用了webpack的插件insert-script-webpack-plugin，把子项目当做一个模块，插入到父项目的html里，这样父子项目就可以通信了，当然，webpack还是需要代理一下，不然是找不到子项目的打包文件的。

webpack配置文件： wepack.config.js(这里我挑重要的发)

const path = require('path');
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const InsertScriptWebpackPlugin  = require('insert-script-webpack-plugin');

const PROXY = {
  '/chilrenProject/': {
    target: 'http://127.0.0.1:8089/'
  },
}
module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "index.js"
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin(
      { template: path.resolve(__dirname, "index.html") }
    ),
    new InsertScriptWebpackPlugin({
      paths: ['/chilrenProject/main.js'] //插入子项目
  }),
  ],
  externals: {
    'vue': 'Vue' //vue不打包，为了使父子项目处在同一个Vue实例
  },
  devServer: {
    contentBase: false,
    hot: true,
    host: "127.0.0.1",
    compress: true,
    port: 8088,
    inline: true,
    proxy: {
      ...PROXY
    },
  },
}

这里webpack请求了/chilrenProject/main.js，然后被代理到了http://127.0.0.1:8089/chilrenProject/main.js，这样就把子项目插入到父项目里面去了，还没完，接下来是取到子项目的路由，然后加载到父项目里面去。
路由文件： /src/router/index.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
const constRouter = [
  {
    path: "/login",
    component: () => import("@/views/login/index.vue")
  },
  {
    path: "/",
    component: () => import("@/views/home/index.vue")
  },
];
const arr = Vue.__shareRouter__.chilrenRouter.concat(constRouter)
export default new Router({
  mode: "history",
  routes: constRouter
});

这里把子项目的路由连接到父项目里去。当然，项目比较简陋，如果路由逻辑复杂，算法还得自己来。
我这里没有引入store，因为store是挂载在Vue实例上面，所以store是可以父子项目共享的。
到这里就结束了，可以运行父项目看看能不能访问子项目的路由吧。

Posted by : lyhq Tags : 本文未设置标签

所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！

Previous post 滚动条悬浮改变宽度、高度、颜色

Next post 旋转照片背景墙/年会抽奖源码

仅有一条评论

MOMEIS

January 26th, 2021 at 10:52:43 AM 回复

来看看

Vue搭建微前端

仅有一条评论

添加新评论