webpack实现多项目独立运行打包

第一步：添加扩展cross-env
第二步：编写项目配置文件projects.js,内容如下：

module.exports = {
  	system: {
    //设置为空打包后不分更目录还是多级目录
		publicPath:'',
		//build编译后存放静态文件的目录
		//assetsDir: "static",

		// build编译后不生成资源MAP文件
		productionSourceMap: false,		
		pages: {
		  index: {
		    entry: "src/projects/system/main.js",
		    template: "public/index.html",
		    filename: "index.html",
		  },
		},
  
		//开发服务,build后的生产模式还需nginx代理
		devServer: {
			open: false, //运行后自动打开浏览器
			port: process.env.VUE_PORT_SYSTEM, //挂载端口
			proxy: {
				'/api': {
					target: process.env.VUE_APP_API_SYSTEM,
					ws: true,
					pathRewrite: {
						'^/api': '/'
					}
				}
			}
		},
  	},

  	tenant: {
    	pages: {
    	  index: {
    	    entry: "src/projects/tenant/main.js",
    	    template: "public/index.html",
    	    filename: "index.html",
    	  },
    	},
		devServer: {
		  open: false, //运行后自动打开浏览器
		  	port: process.env.VUE_PORT_TENANT, //挂载端口
		  	proxy: {
		  		'/api': {
		  			target: process.env.VUE_APP_API_TENANT,
		  			ws: true,
		  			pathRewrite: {
		  				'^/api': '/'
		  			}
		  		}
		  	}
		},
  	}
  	...
};

第三步：配置vue.config.js 如下：

const configs = require("./projects.js");
let projectName = process.env.PROJECT_NAME;
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
	// 基本路径
	// baseUrl: './',//vue-cli3.3以下版本使用
	publicPath: "./", // vue-cli3.3+新版本使用
  
	// 输出文件目录
	outputDir: "dist/" + projectName + "/",

	// pages: conf.pages,
	...configs[projectName],

	...
})

第四步：配置package.json,如下：

{
	"name": "scui",
	"version": "1.6.6",
	"private": true,
	"scripts": {
		"serve": "cross-env PROJECT_NAME=system vue-cli-service serve",
		"serve:tenant": "cross-env PROJECT_NAME=tenant vue-cli-service serve",
		"serve:property": "cross-env PROJECT_NAME=property vue-cli-service serve",
		"build": "cross-env PROJECT_NAME=system vue-cli-service build --report",
		"build:tenant": "cross-env PROJECT_NAME=tenant vue-cli-service build --report",
		"build:property": "cross-env PROJECT_NAME=property vue-cli-service build --report",
		"lint": "vue-cli-service lint"
	}, 
	....
}

第五步：最关键的一步，重要的事情说三遍，运行，运行，运行

如有问题可留言联系