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命令，請各位多指教。