因公司需求需要开发 一个 统筹型管理后台，多个项目一体的那种，所以想到了用vue-cli构建一个 多入口，多项目在同一个vue框架中的方法，不管是development 生产环境还是 product正式环境，都可以在同一个vue框架内部进行多个入口，多项目这种方式去开发无数个项目。
因为好久没有修改过 webpack的底层了，所以找到了之前看到的一个大佬写的地址，看了一下，还挺不错，就是一些地方，可能因为webpack更新有点影响，所以我做了一些局部修改
基于 vue-cli 2 实现，vue 支持多模块项目 这个是那个大佬的地址
其实是在 vue-cli的脚手架里面 的config文件下建立一个js文件，名字随意，为了表示尊重 我还是用的multi.conf.js
文件地址
下面是 这个文件 我这里的代码
let projects = ['projectA', 'projectB', 'projectC'];// 自定义项目 目录名 暂时放置了三个 如需使用可以 向后插入添加let path = require("path");let argvs = process.argv;// console.log('输出信息:', argvs, process.argv); function resolve(dir) { return path.join(__dirname, "..", dir); } function getParams(key) { // argvs ? argvs.indexOf(key) != -1 ? item.split('=')[1] : [] : [] // console.log("当前配置的信息:", key, argvs, process.argv); let name = ""; if (argvs) { for (let i = 0; i < argvs.length; i++) { if (argvs[i].includes(key)) { name = argvs[i]; } } if (name) { return name.split('=')[1] } else { return "" } } else { return "" }} function getModuleAlias() { let alias = {} projects.forEach((key) => { alias[`@${key}`] = resolve(`src/${key}`) }); return alias} function getModuleProcess(name) { if (!projects.includes(name)) { name = projects[0] } return { name, entry: ["babel-polyfill", `./src/${name}/main.js`], alias: resolve(`src/${name}`), index: path.resolve(__dirname, `../dist/${name}/index.html`), assetsRoot: path.resolve(__dirname, `../dist/${name}/`) }}let resultEvent = String(process.env.npm_Lifecycle_event).split(":");let moduleName = getParams('name') || resultEvent[1]// let first1 = getParams('name') || "空";// let first2 = resultEvent || "空"let moduleConfig = { modules: projects, moduleAlias: getModuleAlias(), process: getModuleProcess(moduleName)}module.exports = moduleConfig
其实最重要的地方是在于 process.argv 和path.resolve方法 以及process.env.npm_Lifecycle_event的使用，有兴趣的可以在执行的过程中console一下 这些 变量 或方法，不想console 的话，可以看我下面的解说，
首先 process.argv是下图得到的一个数组 关于当前执行 npm run dev:projectA后的输出，
process.argv内容
此处提一句如果想要自定义去调试或者打包自定义的项目入口，需要提前设置scripts的命令在package.json文件中"dev:projectA": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",此处的dev:冒号后面的 内容 对应的是 项目文件夹的名字，而且要与 multi.conf.js文件的第一行的 projects 里面的数组的 元素对应，因为我就是通过 process.env.npm_Lifecycle_event 这个 nodejs的系统变量拿到的 一段文本:
dev:projectA 因此可以通过这种方式获取 当前 dev的项目 入口名称，ok，此时拿到 当前 要调试的项目入口名称 其次 我还通过path的resolve方法拿到了 当前项目已config文件目录结尾的绝对路径，so，我可以通过 拼接的方式 把我想要的 文件地址给一一拼接出来，
getModuleProcess
所以通过对路径的拼接，实现 项目的运行，然后还没完，这里只是自定义配置了一下 webpack的配置，一些原有的配置还是需要修改的
首先是config\index.js文件，因为项目主文件不是在src下面，而是在你自定义的 项目名称下面 ，可能有些兄弟看到这里 有些疑惑:
这个是我的src主目录下面的目录
看到这里 还是疑惑的兄弟，可以开一个vue-cli针对性的去看一下，ok继续 下面config\index要修改的地方
moduleConfig对象就是我的multi.conf 引入 的对象let moduleConfig = require('./multi.conf');
修改 build\webpack.base.conf.js 文件：moduleConfig 同上
此文件的修改 目的是因为 之前build的主目录已经被我们自定义修改 所以要给使用主目录的地方做处理 其次就是添加 @符号作为当前运行的项目绝对路径到全局
以及把项目组的绝对路径也添加到 全局，可以通过 @项目名 的方式 直接进入该项目目录内部，
"scripts": {
// ...省略
"runa": "npm run dev:projectA",
"dev:projectA": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"builda": "node build/build.js name=projectA",
"runb": "npm run dev:projectB",
"dev:projectB": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"buildb": "node build/build.js name=projectB"
// ...省略
},
"buildb": "node build/build.js name=projectB"
这个是生产环境打包命令也是需要添加到buildb内的，我把 项目名写到命令里面 通过 key:value 的方式携带到逻辑代码里面了就可以做打包成为生产环境做处理了
其次是 需要在 build 文件目录下 创建一个 zip.js文件下面是代码
let pack = require('../package.json');let path = require('path');let FileManagerPlugin = require('filemanager-webpack-plugin');let XeUtiles = require('xe-utils');let moduleConfig = require('../config/multi.conf');let argvs = process.argv.slice(2); function getParams(key) { let data = argvs.find((res) => { res.split('=')[0] === key }) return data ? data.split('=') : []}let datetime = XeUtiles.toDateString(Date.now, 'yyyyMMddHHmmss');let plugins = [];let zipPros = getParams('zip');if (zipPros.length > 0) { plugins.push(new FileManagerPlugin({ onEnd: { delete: [ path.join(__dirname, `../dist/${moduleConfig.process.name}_*.zip`) ], archive: [{ source: path.join(__dirname, `../dist/${moduleConfig.process.name}`), destination: path.join(__dirname, zipPros[1] ? `../${pack.name}_${zipPros[1]}.zip` : `../${pack.name}_${moduleConfig.process.name}_${pack.version}_${datetime}.zip`) }] } }))}module.exports = plugins
这个文件的目录，感觉 大佬应该是想作为 zip打包处理，build的时候 直接把整个项目打包成一个 zip文件
"scripts": {
// ...省略
"build:projectA:zip": "node build/build.js name=projectA zip",
"build:projectB:zip": "node build/build.js name=projectB zip",
"build:projectC:zip": "node build/build.js name=projectC zip",
// ...省略
},
这些就是打包并压缩的命令了，因为原文博客没有给出 zip文件的使用地方，不知道是不是作者忘记了，如果想作为zip文件打包项目可以在 build\webpack.prod.conf.js 文件内的 plugins里面调用
const zip = require("./zip")
但是经过测试:打包zip的命令是有问题的 不知道是我这里的问题还是代码问题 反正经过修改可以打包了
"build:project1:zip": "node build/build.js name=project1 zip=project1",
打包命令最好 zip也是通过 key：value的方式传递到zip里面判断
需要修改一下getParams 方法来判断是否打包成zip
ok，致辞完结，喜欢能与大家共同学习
网友评论