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`)
      }]
    }
  }))
}
复制代码

到这里模块项目已经实现多模块启动，按需打包，压缩等功能

完整项目地址 : github.com/BothEyes199…