vue-cli3 项目优化之多项目共用配置、组件动态打包node命令

起因

前两天在做 vue 项目，有两个独立项目的需求中有很多交互和相似的需求，实际项目最终可能会有很多的页面或者组件共用。但是又因为其中一些需求的特殊性，又不能把两个项目完全合并在一起。于是百度了一番，整出了两个项目功用一套配置和公用组件，通过node命令控制预览、打包结果。也有想过把公用组件部署到私有的cnpm上，但其中有很多还是涉及到公司业务方面的，我们私有cnpm的目的只是希望存储一些公用方法、前端封装组件等等，于是选择了通过node命令来控制。

解决方案

1. 创建命令文件

在根目录中创建一个 scripts 文件夹
在 scripts 中创建 multiProjectConfig 多项目配置文件夹
在 multiProjectConfig 中新建 serve.js ，放置项目serve命令配置代码
在 multiProjectConfig 中新建 build.js ，放置项目build命令配置代码
在 multiProjectConfig 中新建 projectEnter.js ，放置项目入口配置代码以便项目中的其他文件使用
在 multiProjectConfig 中新建 projectPages.js ，放置项目根页面配置代码

serve.js

// process.argv 获取命令行参数
// 比如执行 `npm run serves WebApp DEV`
let projectName = process.argv[2]; // WebApp - 项目名
let env = process.argv[3]; // DEV - 环境配置

// 下面两行代码 获取projectName后把保存起来，写入到projectEnter.js里，方便项目中的其它文件里引入使用
let fs = require("fs");
fs.writeFileSync("./scripts/multiProjectConfig/projectEnter.js", `exports.name = '${projectName}'`);

// 下面两行代码继续执行命令（npm run serve），执行默认命令开始进行预览
let exec = require("child_process").execSync;
exec("npm run serve:" + env, { stdio: "inherit" });

build.js

// process.argv 获取命令行参数
// 比如执行 `npm run builds WebApp DEV`
let projectName = process.argv[2]; // WebApp - 项目名
let env = process.argv[3]; // DEV - 环境配置

// 下面两行代码 获取projectName后把保存起来，写入到projectEnter.js里，方便项目中的其它文件里引入使用
let fs = require("fs");
fs.writeFileSync("./scripts/multiProjectConfig/projectEnter.js", `exports.name = '${projectName}'`);

// 下面两行代码继续执行命令（npm run build），执行默认命令开始进行预览
let exec = require("child_process").execSync;
exec("npm run build:" + env, { stdio: "inherit" });

这两个文件基本上差不多，如果极致甚至可以缩减成一个文件，也通过命令来控制 serve 或 build；

projectPages.js

// 这个文件其实更简单了，通过获取当前项目名来区分根页面的路径
const projectName = require("./projectEnter");
const config = {
	WebApp: {
		name: "WebApp",
		pages: {
			index: {
				entry: "src/projects/WebApp/main.js",
				template: "public/index.html",
				filename: "index.html",
				title: "*****",
			},
		}
	},
	TodoList: {
		name: "TodoList",
		pages: {
			index: {
				entry: "src/projects/TodoList/main.js",
				template: "public/index.html",
				filename: "index.html",
				title: "*****",
			}
		}
	}
};

const configObj = config[projectName.name];
module.exports = configObj;

上面这个文件最终是要在 vue.config.js 中使用的；

vue.config.js

//  vue.config.js
const path = require("path")
const multiProjectConfig = require("./scripts/multiProjectConfig/projectPages")
module.exports = {
	outputDir: "../../.." + pathBuild,
	publicPath: pathBuild,
	productionSourceMap: false,
	transpileDependencies: ["@cttq"],
	devServer: {
		host: "0.0.0.0",
	},
	pages: multiProjectConfig.pages,
	chainWebpack: (config) => {
		config.resolve.alias
			.set("@publicC", path.join(__dirname, "src/components"))
			.set("@publicA", path.join(__dirname, "src/assets"))
			.set("@", path.join(__dirname, "src/projects/WebApp"))
			.set("@assets", path.join(__dirname, "./src/projects/WebApp/assets"))
			.set("@components", path.join(__dirname, "./src/projects/WebApp/components"))
			.set("@plugins", path.join(__dirname, "./src/projects/WebApp/plugins"))
			.set("@style", path.join(__dirname, "./src/projects/WebApp/style"))
			.set("@utils", path.join(__dirname, "./src/projects/WebApp/utils"))
			.set("@img", path.join(__dirname, "./src/projects/WebApp/assets/images"))
	},
}

2. 构建新的项目目录

简单一点贴张图...懒了懒了

这样就可以再不同的项目中使用共用的组件、静态资源或者什么其他你想要共用的东西

3. 修改package.json命令 serves、builds

"scripts": {
	"serve": "vue-cli-service serve",
	"serve:DEV": "vue-cli-service serve --mode DEV",
	"serve:QAS": "vue-cli-service serve --mode QAS",
	"serve:PRE": "vue-cli-service serve --mode PRE",
	"serve:PRD": "vue-cli-service serve --mode PRD",
	"build": "vue-cli-service build",
	"build:DEV": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --mode DEV --report",
	"build:QAS": "vue-cli-service build --mode QAS",
	"build:PRE": "vue-cli-service build --mode PRE",
	"build:PRD": "vue-cli-service build --mode PRD",
	"lint": "vue-cli-service lint",
	"new:comp": "node ./scripts/generateComponent/index",
	"new:view": "node ./scripts/generateView/index",
	"serves": "node ./scripts/multiProjectConfig/serve.js",
	"builds": "node ./scripts/multiProjectConfig/build.js"
},

如此如此，这般这般，就可以在命令行中，通过node命令来控制需要调试、打包的项目和环境了； npm run serves WebApp DEV npm run builds TodoList DEV

以上就是多项目共用配置、组件动态打包node命令，请各位多指教。