多项目打包框架

背景

需求方有很多小项目，都是单个页面，如果每个工程单独开设一个工程，资源有点浪费，也不利于开发人员代码统一管理维护。

故提出解决方案：多项目单独打包。一个工程里面有多个单独的小项目，公共资源共用，每个项目配置单独的入口，使用webpack打包单个项目。

工程改造

目前我们的项目工程是使用vue-cli4构建的。在这基础上，需要进行工程改造
思路：
1、移除不需要的项目文件，使其最简单化。
2、在项目src目录下新建projects目录，用来放项目文件
3、给每一个项目配置main.js路口文件，配置路由文件，以及App.vue文件
4、配置打包文件vue.config.js
5、配置package.json 打包指令
6、运行打包部署测试效果

打包文件配置

目的是单独打包每一个小项目
需要配置：
1、项目入口
2、打包输出路径
3、devServer服务配置
4、项目的名称

项目入口配置

有两种方式：
1、配置pages

pages: {
      index: {
        entry: "src/projects/projectA/main.js",
        template: "public/index.html",
        filename: "index.html"
      }
    }

如果配置中有preload 的配置，那么需要修改相关的配置，不然会运行报错

config.plugin('preload-index').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])

2、修改webpack默认的入口

    config.entry.app = './src/main.js' // 默认

配置输出路径

  outputDir: 'dist/' +'projectA' + '/',

devServer服务配置

devServer: {
      port: 7001, // 端口地址
      open: false, // 是否自动打开浏览器页面
      host: '0.0.0.0', // 指定使用一个 host，默认是 localhost
      https: false, // 使用https提供服务
      disableHostCheck: true
    }

项目的名称配置

    config.name = 'projectA'

综合上述配置
可输出配置文件projectConfig.js

  projectA: {
    name: 'projectA',
    entry: './src/projects/projectA/main.js',
    devServer: {
      port: 7001, // 端口地址
      open: false, // 是否自动打开浏览器页面
      host: '0.0.0.0', // 指定使用一个 host，默认是 localhost
      https: false, // 使用https提供服务
      disableHostCheck: true
    }
  }

vue.config.js 完整配置

'use strict'
const projectsConfig = require('./config/projectsConfig.js')
const projectName = process.env.PROJECT_NAME

module.exports = {
  devServer: {
    ...projectsConfig[projectName].devServer
  },
  publicPath: './',
  outputDir: 'dist/' + projectName + '/',
  assetsDir: 'static',
  configureWebpack(config) {
    config.entry.app = projectsConfig[projectName].entry
    const name = projectsConfig[projectName].name || 'Admin'
    const resolve = {
      alias: {
        '@': path.join(__dirname, 'src')
      }
    }
    return { name, resolve }
  }
// 其他配置根据需求自行配置

配置打包指令

package.json
安装cross-env

npm install cross-env

配置打包项目名称PROJECT_NAME

"dev:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service serve ",
"build:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service build --mode production-dev",

效果展示

运行

npm run build:projectA

npm run dev:projectA

项目是采用iframe嵌套展示的