随着项目的需求越来越多，单界面应用可能已经无法满足现在的需求了。所以，这个时候需要进行根据模块来打包项目。根据公司的要求，我这边想到一个两个方法来进行模块化打包

方法一

每个项目的路由是个单独的独立文件，根据模块的选择进行路由的配置打包。这里我就不详细讲解了。有一些前端开发基础的人，基本上都可以很好的完美的理解到重点

根据模块进行路由配置打包

方法二

主要是结合了vue-cli的pages多界面应用与cross-env的相互结合来进行设置打包

npm install --save-dev cross-env

文件目录

文件目录.jpg

新建文件config.js

module.exports =  {
    oneProject: {
        pages: {
            index: {
                entry: `src/oneProject/main.js`,
                filename: 'index.html',
                template: 'public/index.html'
            }
        },
        devServer: {
            port: 80
        }
    },
    twoProject: {
        pages: {
            index: {
                entry: `src/twoProject/main.js`,
                filename: 'index.html',
                template: 'public/index.html'
            }
        },
        devServer: {
            port: 81
        }
    },
    home: {
        pages: {
            index: {
                entry: `src/home/main.js`,
                filename: 'index.html',
                template: 'public/index.html'
            }
        },
        devServer: {
            port: 82
        }
    }
}

vue.config.js配置

let projectName = process.env.PROJECT_NAME
console.log(projectName)

const config =  require('./config.js')

module.exports = {
  // 根据当前执行的指令引用对应的模块
  ...config[projectName],
  // 根目录设置
  publicPath: "./", 
  // 输出文件目录
  outputDir: "dist/" + projectName + "/"
};

使用cross-env在pageage.json进行设置

"scripts": {
    "dev:home": "cross-env PROJECT_NAME=home vue-cli-service serve",
    "dev:oneProject": "cross-env PROJECT_NAME=oneProject vue-cli-service serve",
    "dev:twoProject": "cross-env PROJECT_NAME=twoProject vue-cli-service serve",
    "build:home": "cross-env PROJECT_NAME=home vue-cli-service build",
    "build:oneProject": "cross-env PROJECT_NAME=oneProject vue-cli-service build",
    "build:twoProject": "cross-env PROJECT_NAME=twoProject vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

打包之后的文件

打包文件.png

展示效果

总项目运行效果界面 - oneProject项目.png

总项目运行效果界面 - twoProject项目.png