微服務架構最佳實踐（vue-cli3多項目搭建）

時間 2019-11-08

原文原文鏈接

做者俊餘，前端界的一名小學生。html

背景

2016年由ThoughtWorks提出微前端的概念，將後端微服務的理念應用於瀏覽器端，即將 Web 應用由單一的單體應用轉變爲多個小型前端應用聚合爲一的應用。前端

H5前端所承載的業務主要是拉新，保持用戶粘性，保持項目生態的完整性以及數據展現，管理系統。因此對應到產品就是活動頁面（拉新，保持用戶粘性），各家小程序（保持項目生態的完整性），pc後臺管理系統（數據展現，管理系統）如何把微服務架構思路加入到咱們現有框架中。vue

框架目的

獨立開發、獨立測試、獨立發佈、獨立部署，提升了開發效率。（業務解耦）
統一的樣式、統一的公共組件，項目的粒度易控制
資源按需加載，提取公共庫

理解美團的微服務架構

我理解美團的微服務架構構建portal項目來作項目總入口，提供全局路由，require依賴，數據流。webpack

portal 單獨把Main.js打包成一個項目做爲項目總入口，子項目只生成chunk包，按需加載。加載就是合併的過程，提供完整的子項目註冊，掛載，分離。nginx

咱們參考美團的微服務架構，根據產品的不一樣特性。將架構分爲下面兩種。web

1. 單頁面應用架構

單頁應用架構咱們主要應用在活動項目中，咱們把每一個活動抽象成組件,最終線上運行的是一個單頁應用活動框架繼承了portal項目的全部優勢，項目微服務化，業務解耦等等。json

經過路由精準控制每一個活動上下線，下線活動代碼隨時能夠刪除（不可複用）
活動通用頁面，通用組件可複用

咱們先來看下目錄結構小程序

整個活動項目將src/main.js做爲主入口，加載全部的依賴，引入頁面路由，經過統一的Router來作資源索引。使用異步加載chunks，達到比portal更優的效果segmentfault

component: () => import(/* webpackChunkName: "newUserCoupon-h5" */ '@/pages/newUserCoupon/views/couponH5')
複製代碼

原理

一個nginx規則對應一個index.html。1對1，線上根據路由進入不一樣的活動，同時沒必要加載全部業務代碼，但能夠提取公共依賴。後端

2. 多項目打包

多項目打包咱們主要應用在hybird項目中，框架最終輸出的每個獨立打包的文件夾，每一個項目互不干擾，源代碼都在一個倉庫裏。

開發，打包，生產的代碼都經過文件夾區分開，項目之間互不影響，獨立的路由系統。

vue.config.js

const path = require('path');
let projectMode = process.argv.slice(0).reverse()[1]
let appName =  process.argv.slice(0).reverse()[0].replace('--', '');
function resolve (dir) {
    return path.join(__dirname, dir)
}
console.log(process.argv.slice(0).reverse())
if (projectMode == 'serve') {
    // let projectServeName = process.argv[3].replace('--', '');
    module.exports = {
        lintOnSave: false,
        chainWebpack: (config)=>{
            config.resolve.alias
                .set('@pages', resolve('src/pages'))
        },
        pages: {
            index: {
                entry: 'src/pages/' + appName + '/main.js',
            }
        },
        devServer: {
            open: 'Google Chrome',
            overlay: {
                warnings: false,
                errors: false
            }
        }
    }
} else {
    module.exports = {
        outputDir: 'dist/'+appName,
        chainWebpack: (config)=>{
            config.resolve.alias
                .set('@pages', resolve('src/pages'))
        },
        configureWebpack: {
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.js'
                }
            }
        },
        publicPath: './',
        productionSourceMap: false,
        pages: {
            index: {
                // page 的入口
                entry: 'src/pages/'+ appName +'/main.js',
                // 模板來源
                template: 'public/index.html',
                // 在 dist/index.html 的輸出
                filename: 'index.html',
                // 當使用 title 選項時，
                // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
                title: '',
                // 在這個頁面中包含的塊，默認狀況下會包含
                // 提取出來的通用 chunk 和 vendor chunk。
                chunks: ['chunk-vendors', 'chunk-common', 'index']
            }
        }
    }
}

複製代碼

接下來只要運行

yarn run build --{appname}
複製代碼

就能夠打包出咱們但願的應用啦

線上nginx.conf 咱們優化一下不須要每個項目都須要修改nginx

if ($uri ~ /hybird/(.*)/.*) {
    set $hybird /hybird/$1;
    }
    location ~ /hybird/(.*)/.* {
    	 root /data/www-data/hupu.com;
      try_files $uri ./$uri/index.html $hybird/index.html;
    }
複製代碼

多頁面應用打包網上有不少文章介紹。我參考的是Vue CLI 3多頁應用實踐和源碼設計. 這篇文章不單單給出的完善的配置，目錄結構而且包含了源碼分析