微前端思考,vue多页面项目独立打包和个人推荐的vue建项模式

6,072 阅读3分钟

一、微前端几种方式

1、single-spa

2、阿里飞冰

3、iframe

等等……

其实没什么太多可以说的,上述大家如果体验过那么大致知道原理。其中iframe是想对成本最低的,或者说侵入性最小的。其余两种成本较高。但是总体而言并非不可接受。

其实这个构建模式我之前就用了,只是那会csdn文章迁移过来。就厚颜无耻的再用一次了。

最近进了新公司,感受了别人公司的代码,感触较多。

二、我的构建模式解决了什么问题

1、模块共享

2、独立运行和打包

3、项目保持完整独立

缺陷:

1、公共模块高度依赖耦合,所以请不要存放所有和业务有关的模块

2、路由独立,互不影响

三、实践

原理:

借用vue多页面开发模式,对应的配合对输入命令的不同加载不同的单页面项目即可

本身属于多页面构建模式

但是我比较推崇这种构建模式,这样使得你的项目本身扩展性得到了提高。

并且如果是vue项目的话,那么其实也可以进行多项目融合

1、vue.config.js改造(全量)

const webpack = require("webpack");
//获取命令行参数
const projectName = process.argv[3];
console.log("当前打包项目名称:" + projectName);


//页面配置参数,注意项目名称保持一致,页面结构保持一致
const multiPageConfig = {
  //index是特殊的项目,不做多余操作,仅仅用于项目分发
  //举例,如判断电脑端和移动端,做首页项目入口
  consumer: {
    name: "登录平台"
  },
  blog: {
    name: "海天酱油博客"
  },
  interface: {
    name: "接口平台"
  },
  backstage: {
    name: "后台"
  }
};


//生成统一的页面配置结构
const multiPage = function() {
  let page = {};
  for (let item in multiPageConfig) {
    page[item] = {
      entry: `src/${item}/main.js`,
      template: `src/${item}/index.html`,
      filename: `${item}.html`,
      title: multiPageConfig[item].name,
      favicon: `src/${item}/assets/${item}.ico`
    };
  }
  return page;
};
const page = multiPage();
//vue下配置文件参数
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = [
  "js",
  "css",
  "svg",
  "woff",
  "ttf",
  "json",
  "html"
];
const vueConfig = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/", //部署应用包时的基本 URL
  outputDir: "dist", //打包目录
  pages: projectName ? page[projectName] : page,
  productionSourceMap: false, //不输出map文件
  configureWebpack: {
    plugins: [
      //开启gzip压缩
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,
        minRatio: 1,
        deleteOriginalAssets: false //是否删除原文件
      }),
      new webpack.ProvidePlugin({
        "window.Quill": "quill/dist/quill.js",
        Quill: "quill/dist/quill.js"
      })
    ]
  },
  devServer: {
    proxy: {
      "/dream-admin": {
        target: "http://127.0.0.1:7001",
        changeOrigin: false
        // pathRewrite: {
        //   "^/api": ""
        // }
      }
    }
  }
};
console.log(page);
module.exports = vueConfig;

2、代码分析

主要其实全部都在这块代码部分了,这里会生成对应的页面配置信息,然后生成配置信息,最后放入vue的pages里面即可。构建方式相当简单

const webpack = require("webpack");
//获取命令行参数
const projectName = process.argv[3];
console.log("当前打包项目名称:" + projectName);


//页面配置参数,注意项目名称保持一致,页面结构保持一致
const multiPageConfig = {
  //index是特殊的项目,不做多余操作,仅仅用于项目分发
  //举例,如判断电脑端和移动端,做首页项目入口
  consumer: {
    name: "登录平台"
  },
  blog: {
    name: "海天酱油博客"
  },
  interface: {
    name: "接口平台"
  },
  backstage: {
    name: "后台"
  }
};


//生成统一的页面配置结构
const multiPage = function() {
  let page = {};
  for (let item in multiPageConfig) {
    page[item] = {
      entry: `src/${item}/main.js`,
      template: `src/${item}/index.html`,
      filename: `${item}.html`,
      title: multiPageConfig[item].name,
      favicon: `src/${item}/assets/${item}.ico`
    };
  }
  return page;
};

3、项目实际目录

目录解析:

assets   静态目录

backstage 后台项目

blog 博客项目

common 公共

components 

consumer 消费者项目

interface 接口项目


项目模板


其中template就是根据项目名称来创建的。每个项目的结构都被约束成了这样的结构。