如何在Nuxt.js+Express环境中实现子应用模块化部署

一、修改Nuxt配置实现按需构建 #

直接调整nuxt.config.js，用环境变量指定要打包的子应用，让Nuxt只处理对应页面和依赖的组件：

export default {
  // 根据环境变量APP_TARGET决定打包哪些页面
  pages: () => {
    const appTarget = process.env.APP_TARGET || 'all'
    const pageMap = {
      App1: {
        path: '/app1',
        file: './pages/App1/index.vue'
      },
      App2: {
        path: '/app2',
        file: './pages/App2/index.vue'
      },
      App3: {
        path: '/app3',
        file: './pages/App3/index.vue'
      }
    }

    if (appTarget === 'all') return pageMap
    // 只返回目标子应用的页面配置
    return { [appTarget]: pageMap[appTarget] }
  },

  build: {
    extend(config) {
      const appTarget = process.env.APP_TARGET
      if (appTarget && appTarget !== 'all') {
        // 给webpack添加规则，仅打包对应子应用组件和共享组件
        config.module.rules.push({
          test: /\.vue$/,
          include: [
            /components\/SharedComponents/,
            new RegExp(`components/${appTarget}Components`)
          ],
          use: ['vue-loader']
        })
        // 给子应用组件设置别名，方便页面引用
        config.resolve.alias['@/app-components'] = `@/components/${appTarget}Components`
      }
    }
  }
}

二、在package.json添加子应用专属构建命令 #

把每个子应用的构建、开发命令单独写进scripts里，不管手动执行还是CI/CD部署都更方便：

{
  "scripts": {
    "build:app1": "APP_TARGET=App1 nuxt build",
    "build:app2": "APP_TARGET=App2 nuxt build",
    "build:app3": "APP_TARGET=App3 nuxt build",
    "build:all": "nuxt build",
    "dev:app1": "APP_TARGET=App1 nuxt dev",
    "dev:app2": "APP_TARGET=App2 nuxt dev",
    "dev:app3": "APP_TARGET=App3 nuxt dev"
  }
}

如果是Windows系统，命令要改成set APP_TARGET=App1 && nuxt build；嫌跨平台麻烦的话，直接安装cross-env包统一命令：

"build:app1": "cross-env APP_TARGET=App1 nuxt build"

三、部署阶段的分离操作 #

1. 前端部署：执行对应子应用的构建命令后，Nuxt生成的dist目录里仅包含该子应用的页面、专属组件和共享组件。部署时直接把这个dist目录上传到对应子应用的服务器路径即可，无需处理其他子应用文件。
2. 后端路由代理：Express后端通过路由前缀区分不同子应用，将请求转发到对应前端部署目录。修改Backend/index.js：

const express = require('express')
const path = require('path')
const app = express()

// 代理App1的静态资源
app.use('/app1', express.static(path.join(__dirname, '../Frontend/dist')))
// 同理配置App2、App3，部署时可将各子应用的dist目录分开存放，比如dist/app1、dist/app2
app.use('/app2', express.static(path.join(__dirname, '../Frontend/dist/app2')))
app.use('/app3', express.static(path.join(__dirname, '../Frontend/dist/app3')))

// 后端API路由
app.use('/api', require('./routes'))

app.listen(3000, () => {
  console.log('Server up on port 3000')
})

四、注意事项 #

• 共享组件内不要编写依赖某一子应用的专属代码，否则构建其他子应用时会出现引用错误。
• 版本控制中可单独关注每个子应用的pages和components目录，部署时仅拉取对应目录的更新，能大幅缩短构建时间。

内容的提问来源于stack exchange，提问作者Sean McMullen