微前端思考，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就是根據項目名稱來建立的。每一個項目的結構都被約束成了這樣的結構。