多项目共用目录开发，分项目打包

写在前面

首先，不知道标题取的是否正确，这里详细描述下使用的场景。以前负责了项目组理财产品的移动端开发，近期项目组打算开发保险产品的移动端版本。看过设计稿和交互稿后发现，两个项目的基础页面是基本相同的，如：登陆，注册，忘记密码，我的中心……固然还包括一些基础的UI组件也是相同的。一开始的想法是保险产品也重起一个项目开发，后面想一想，他们这么多的共同点，难道要把理财的基础页面和组件复制一份来开发保险吗，这么作的话势必之后要维护两套相同的代码，因而我想能不能他们放在一块儿开发，而npm run dev和npm run build是分项目进行的，具体实现以下(项目是基于vue-cli3.0开发的，因此相关配置是在其基础上修改的)：

修改npm script

"scripts": {
    "invest-dev": "vue-cli-service serve -invest",//运行该命令表示启动理财项目
    "insurance-dev": "vue-cli-service serve -insurance",//运行该命令表示打包理财项目
    "invest-build": "vue-cli-service build -invest",//同上
    "insurance-build": "vue-cli-service build -insurance"//同上
}
复制代码

先看看分项目构建的效果

区分项目相关核心代码project.config.js

/*
配置不一样项目的输出文件夹名称，文件路径前缀，项目入口
*/
const env=process.env.NODE_ENV;
const project={
	invest:{
		outputDir:'invest',//理财的输出文件夹名称为invest
		publicPath:env==='development'?'/':'/test/invest',//若是是开发环境文件引用前缀为'/'
		entry:'./src/pages/invest/main.js'
	},
	insurance:{
		outputDir:'insurance',
		publicPath:env==='development'?'/':'/test/insurance',
		entry:'./src/pages/insurance/main.js'
	}
}

module.exports=project
复制代码

配置vue.config.js文件

const project=require('./config/project.config.js');
const projectName=process.argv[3]?process.argv[3].substring(1):'invest';//获取如命令：vue-cli-service serve -invest中的第三个参数“-invest”，截取invest用做区分项目使用

module.exports = {
    outputDir:project[projectName].outputDir,
    publicPath:project[projectName].publicPath,
    pages: {
        index: {
            entry: project[projectName].entry,// page 的入口
            template: 'public/index.html',// 模板来源
            filename: 'index.html',//输出文件名称
        },
    }
}
复制代码

文件目录截图

vue.config.js和project.config.js

项目业务代码