VUE多入口多项目项目架构(multi-page)(例如:OA系统,CRM系统)

多入口多页面项目???

众所周知,一般的webpack项目都是单页面项目,我们也是可以配置webpack为多入口项目的。

为什么使用多入口架构?

一般情况下,我们使用vue cli3来打包单页面应用程序,只需要使用默认配置的一个入口就可以了。但是,如果一个项目很大,有很多小的分项目,这种情况就比较适合多页面程序了,也就是webpack多入口。

思考:多入口解决哪些痛点?

例如我司的OA系统,比较复杂,包含XX、XXX、不可描述等多个子系统,如果全部放在一个vue项目中去做的话,那么就出现了一些问题:

  • 无法进行全局的掌控;

  • 开发一个子系统时,不需要启动另外一个系统;

  • 热部署一个子系统时需要编译所有系统等;

这时,使用多入口多页面架构就能避免以上的问题。

怎么配置vue多入口项目?

首先,我们先创建一个vue项目,这个请参考cli3官网的教程

duang~我们的项目就创建好了,新建项目的目录结构应该像下图这个样子:

我们先创建两个子项目,在src目录下新建文件夹sub-prosub-pro1,然后在子项目下分别新建App.vuemain.ts:

// sub-pro/App.vue

<template>
  <div id="app">
    sub-pro
  </div>
</template>
// sub-pro/main.ts
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')
// sub-pro1/App.vue

<template>
  <div id="app">
    sub-pro1
  </div>
</template>
// sub-pro1/main.ts
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

这样,我们的两个子项目就已经配置好了,接下来配置vue.config.js(在项目根目录下)文件:

module.exports = {
  pages: {
    "index":{
      entry: "src/main.ts",
    },
    "sub-pro":{
      entry: "src/sub-pro/main.ts",
    },
    "sub-pro1":{
      entry: "src/sub-pro1/main.ts",
    }
  }
}

这里我们配置了三个入口,分别是src/main.tssrc/sub-pro/main.tssrc/sub-pro1/main.ts 第一个入口是我们的主入口,当我们项目启动后会进入这个入口,剩下的两个就是我们的子项目的入口。

这样,我们就配置完啦,可以启动了。命令行运行:

yarn run serve

熟悉的vue初始化界面:

我们的子项目在哪里呢?

现在我们来修改src/App.vue:

<!--src/App.vue-->
<template>
  <div id="app">
    <div id="nav">
      <a href="/sub-pro" target="_self">sub-pro</a> |
      <a href="/sub-pro1" target="_self">sub-pro1</a>
    </div>
    <router-view/>
  </div>
</template>

保存,刷新浏览器就可以看到home和about的超链接被我们改成了sub-pro和sub-pro1的超链接啦

点击超链接,就可以访问我们的sub-pro和sub-pro1子项目了。

问题来了,假设我们只开发sub-pro子项目,怎么只启动这个项目呢?

这个时候,我们就需要一个命令行工具来帮我们实现了inquirer,这个命令行库具体可以看官方文档。

具体的思路就是,使用inquire来询问开发者启动哪些项目,然后保存这个配置,然后使用vue.config.js来读取配置项启动选择的项目。

我们需要一个配置文件来管理我们的多入口启动项,我们在根目录下新建pages.yml

projects:
  index:
    entry: 'src/main.ts'
  sub-pro:
    entry: 'src/sub-pro/main.ts'
  sub-pro1:
    entry: 'src/sub-pro1/main.ts'

接下来,我们需要管理我们的多入口启动项,我们在项目根目录下新建pages.js

'use strict'
const inquirer = require('inquirer')
const yaml = require('js-yaml') // 一个解析yaml的库
const fs = require('fs')
const path = require('path')
const historyFilePath = path.join(__dirname, 'pages.json')
const pages = yaml.safeLoad(
  fs.readFileSync(path.join(__dirname, './pages.yml'), 'utf8')
)
const { projects } = pages

const hiddenChoices = ['index']

const projectsList = Object.keys(projects)
  .filter(projectName => hiddenChoices.indexOf(projectName) === -1)
  .map(projectName => ({
    name: projectName
  }))

inquirer
.prompt([
  {
    type: 'confirm',
    name: 'use_prev',
    message: '使用上次的配置?',
    default: true,
    when() {
      return fs.existsSync(historyFilePath)
    },
  },
  {
    type: 'checkbox',
    message: '选择项目',
    name: 'projects',
    choices: projectsList,
    when(answers) {
      return !fs.existsSync(historyFilePath) || !answers.use_prev
    },
    validate(answer) {
      if (answer.length < 1) {
        return '你必须至少选择一个项目.'
      }
      return true
    },
  },
])
.then(answers => {
  if (!answers.use_prev || !fs.existsSync(historyFilePath)) {
    let collections = {}
    collections.default = projects
    collections.projects = {}
    answers.projects.forEach(projectName => {
      collections.projects[projectName] = projects[projectName]
    })

    const data = JSON.stringify(collections, null, '  ')
    fs.writeFileSync(historyFilePath, data)
  }
  const projectList = Object.keys(require('./pages.json').projects)
  console.log(`使用项目: \x1b[32m${projectList.join(', ')}\x1b[0m`)
})

这里就将开发者选择的项目保存在了pages.json中了,接下来还要修改vue.config.js中的pages的配置:

const isProduction = process.env.NODE_ENV === 'production'

let pages

const pagesConfigs = require('./pages.json')

if (isProduction) {
  pages = pagesConfigs.default
} else {
  pages = pagesConfigs.projects
}

module.exports = {
  pages
}

这样,我们就可以做到单独启动sub-pro这一个子项目啦。

问题来了,怎么只部署一个子项目?

这里我的思路是通过规范git commit message,利用commit message来确定打包部署某一个或某几个子项目,具体还在思索中,所以步骤就没有啦。

(未完待续。。。)

Last updated