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

1、微前端几种方式

一、single-spa

二、阿里飞冰

三、iframe

等等……

其实没什么太多能够说的，上述你们若是体验过那么大体知道原理。其中iframe是想对成本最低的，或者说侵入性最小的。其他两种成本较高。可是整体而言并不是不可接受。

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

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

2、个人构建模式解决了什么问题

一、模块共享

二、独立运行和打包

三、项目保持完整独立

缺陷：

一、公共模块高度依赖耦合，因此请不要存放全部和业务有关的模块

二、路由独立，互不影响

3、实践

原理：

借用vue多页面开发模式，对应的配合对输入命令的不一样加载不一样的单页面项目便可

自己属于多页面构建模式

可是我比较推崇这种构建模式，这样使得你的项目自己扩展性获得了提升。

而且若是是vue项目的话，那么其实也能够进行多项目融合

一、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;
复制代码

二、代码分析

主要其实所有都在这块代码部分了，这里会生成对应的页面配置信息，而后生成配置信息，最后放入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;
};
复制代码

三、项目实际目录

目录解析：

assets   静态目录

backstage 后台项目

blog 博客项目

common 公共

components 

consumer 消费者项目

interface 接口项目

项目模板

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