vue-multi-module【多模塊集成的vue項目，多項目共用一份配置，能夠互相依賴，也能夠獨立打包部署】

時間 2019-11-17

標籤 vue multi module 多模塊集成項目共用一份配置能夠互相依賴獨立打包部署欄目設計模式简体版

原文原文鏈接

基於 vue-cli 2 實現，vue 多模塊、vue多項目集成工程

Github項目地址 : github.com/BothEyes199…html

目標：多模塊集成的vue項目，多項目共用一份配置，能夠互相依賴，也能夠獨立打包部署vue

使用業務場景

1.若是項目可能有對應多個不一樣UI界面;對於這樣的場景你可能首先會想到，用樣式主題就能夠實現，基本的樣式或者換膚是能夠經過樣式實現。但若是要實現更復雜的，好比不一樣兩套UI的界面可能功能顯示及樣式都有差異，那就不得不單獨拆成一個項目，可是這樣又會形成每一個項目不少冗餘代碼。node

2.若是項目有多個子模塊(同時子模塊之間又存在互相依賴關係)；對於這樣的場景是能夠把項目獨立發佈到npm倉庫，可是這樣又涉及到每一個模塊都須要獨立編譯好再發布，實際過程有顯得有些繁瑣（實際視狀況而定）。webpack

對於以上場景可使用一個項目管理多個子模塊也是一個不錯的選擇。git

多頁面和多模塊區別

多頁面：多頁面是指一個項目有多個入口，打包是會生成多個html文件，實際開發過程當中都是混合在一個項目中開發；es6

多模塊：是指不一樣的業務模塊能夠進行拆分；各自獨立運行、也能夠互相引用，這一點和經過 npm 發佈是相似的；對於一些項目自己不容許發佈的狀況下，既能夠獨立開發，又不須要發佈到共有倉庫（固然也能夠經過創建私有倉庫解決哈）github

問題:

1,如何劃分子模塊； 2,如何分離可複用組件； 3,如何獨立編譯，每一個子模塊獨立打包編譯、運行；web

優勢

1,高複用性 2,統一管理依賴庫 3,不一樣模塊使用的依賴各自按需打包 4,模塊之間相互獨立運行、編譯、打包 5,模塊之間能夠直接互相引用，不須要iframe（通常方式是經過iframe嵌入，這樣的性能至關差）vuex

一：開始建立項目

先用vue-lic建立個demo項目：vue-cli

vue init webpack vue-multi-module
複製代碼

先看看建立成功的項目目錄：

建立完後先跑起來看看：

npm run dev
複製代碼

二：添加多項目模塊

把src目錄下的文件換成多模塊的形式

build：編譯、運行相關腳本文件 config：編譯、運行相關配置文件 static：不須要編譯的靜態資源，放到對應的模塊目錄下

子模塊1
	
	  子模塊2
	
	   ...
複製代碼

src：項目源碼

comm：公共模塊

            script：公共js文件

            components：公共組件

    子模塊1：

            assets：樣式、圖片等資源文件

            common：業務相關的公共文件

            components：業務組件

            router：路由配置

            store：vuex相關

            views：頁面視圖

    子模塊2：

    子模塊3：

     ...
複製代碼

項目模塊結構安裝上面的改動完畢以後，控制檯會報一些路徑錯誤之類的：

這是由於 webpack.base.conf.js裏面的 main.js的路徑發生改變致使的，以前項目是單模塊只要一個 main.js，如今換成多模塊以後每一個模塊都有本身獨立的 main.js，因此要修改配置。

三：修改配置

1.增長 config/multi.conf.js :多模塊配置文件，定義各個模塊本身的端口，名稱，轉發規則，靜態資源

.............
// 多模塊獨立配置
var importModules = [
  new MultiModule('project1', {
    port: 8091,
    statics: ['static1'],
    proxyTable: {
      '/servers1/': getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
  }),
  new MultiModule('project2', {
    port: 8092,
    statics: ['static2'],
    proxyTable: {
      '/servers2/': getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
  }),
  new MultiModule('project3', {
    port: 8093,
    statics: ['static3'],
    proxyTable: {
      '/servers3/': getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
  }),
  new MultiModule('project4', {
    port: 8094,
    statics: ['static4'],
    proxyTable: {
      '/servers4/': getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
  })
]
..........
複製代碼

2.修改 build/webpack.base.conf.js 文件：修改啓動項目的入口文件，添加各個模塊的別名

..............
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: multiConfig.process.entry,
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@comm': resolve(`src/comm`),
      '@': multiConfig.process.alias,
      ...multiConfig.moduleAlias
    }
  },
.............
複製代碼

以上兩個配置加上以後以前的main.js錯誤就消失了，可是又會報一些語法錯誤：

這是由於項目中的用了 sass語法和一些 es6語法缺乏轉碼包，因此要加上對應的包：

到這裏項目就能夠正常啓動了：

3.修改 package.json文件

這裏默認啓動的是project1，若是須要啓動project2，project3，就須要在package.json裏面加對應的script

如今能夠啓動： npm run dev:project2

可能你們注意到了每次啓動的時候端口都是同樣的：

這樣若是同時啓動多個項目就無法區分誰是誰了，因此要在 webpack.dev.conf.js裏面的 compilationSuccessInfo/messages裏面加上對應項目的提示信息和自定義端口，以及每一個項目的代理轉發地址也不一樣，也要從 multi.conf.js獲取，涉及到修改如下的兩個配置文件

4.修改webpack.dev.conf.js和config下的index.js文件

webpack.dev.conf.js：修改本地轉發規則proxy（指向multi），修改啓動後的描述文字

// Add FriendlyErrorsPlugin
      let host = ['localhost', '127.0.0.1', '0.0.0.0'].includes(devWebpackConfig.devServer.host) ? 'localhost' : devWebpackConfig.devServer.host
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [chalk`{bold.rgb(255,255,0) [${pack.name} => ${multiConfig.process.name}]} App running at:\n - Local:   {bold.cyan http://${host}:${port}${config.dev.assetsPublicPath}}\n - Network: {bold.cyan http://${getIPAdress()}:${port}${config.dev.assetsPublicPath}}`]
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})
複製代碼

index.js：修改全部啓動端口（port）和靜態資源地址（static）

dev: {

    // Paths
    assetsSubDirectory: multiConfig.process.assetsSubDirectory,
    assetsPublicPath: multiConfig.process.assetsPublicPath,
    proxyTable: null,

    // Various Dev Server settings
    host: multiConfig.process.host, // can be overwritten by process.env.HOST
    port: multiConfig.process.port, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


複製代碼

到這裏本地啓動的名稱，端口，代理，靜態資源都已經區分開了。接下來打包的時候也要按需打包每一個模塊項目本身的依賴的資源：

5.修改package.json和config下的index.js文件

package.json：新加命令

"build": "npm install && npm run build:project1 && npm run build:project2 && npm run build:project3 && npm run build:project4",
    "build:project1": "node build/build.js name=project1",
    "build:project1:zip": "node build/build.js name=project1 zip",
    "build:project2": "node build/build.js name=project2",
    "build:project2:zip": "node build/build.js name=project2 zip",
    "build:project3": "node build/build.js name=project3",
    "build:project3:zip": "node build/build.js name=project3 zip",
    "build:project4": "node build/build.js name=project4",
    "build:project4:zip": "node build/build.js name=project4 zip",
複製代碼

config下的index.js：各模塊分開打包後的路徑

build: {
    // Template for index.html
    index: multiConfig.process.index,

    // Paths
    assetsRoot: multiConfig.process.assetsRoot,
    assetsSubDirectory: multiConfig.process.assetsSubDirectory,
    assetsPublicPath: multiConfig.process.assetsPublicPath,
  }
複製代碼

6.webpack.prod.conf.js：打包的時候靜態資源按需copy拉取（CopyWebpackPlugin），添加模塊壓縮添加packZip.js。

new CopyWebpackPlugin(multiConfig.process.publics.filter(name => isDirectory(path.resolve(__dirname, `../static/${name}`))).map(name => {
      return {
        from: path.resolve(__dirname, `../static/${name}`),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    })),
    // pack zip
    ...require('./packZip')
複製代碼

packZip.js：依賴filemanager-webpack-plugin打包zip組件，package.json相應添加

.............
  plugins.push(new FileManagerPlugin({
    onEnd: {
      delete: [
        path.join(__dirname, `../${pack.name}_${multiConfig.process.name}_*.zip`)
      ],
      archive: [{
        source: path.join(__dirname, `../dist/${multiConfig.process.name}`),
        destination: path.join(__dirname, zipPros[1] ? `../${pack.name}_${zipPros[1]}.zip` : `../${pack.name}_${multiConfig.process.name}_v${pack.version}_${datetime}.zip`)
      }]
    }
  }))
}
複製代碼

到這裏模塊項目已經實現多模塊啓動，按需打包，壓縮等功能