关于vue多个项目的管理

vueCli + webpack

应用场景：

一套代码需要支持10几家客户，每家的皮肤，功能都有一些小的差异，主体流程大致是一样的。

思路：

在一个vue的服务中管理多个项目，各项目的功能模块相对独立，但公共部分可以提取为公共组件，并在多个项目之间进行调用

实现方法：

一、项目结构：

在src文件夹下创建各项目的文件夹，并在项目文件夹中创建assets、components、router、store、view,并将App.vue(页面入口文件)、main.js(程序入口文件)、index.html(模板入口文件)放入到各项目文件夹中，在src的目录下保留assets、components、view文件夹来存放各项目之间公用的资源、组件和界面；如下图：

二、修改相关配置文件：

通过修改相关配置文件，来达到差异化编译的目的；
1、修改package.json文件
这里使用到了环境变量cross-env;

{
	// 我们在编译时输入对应的命令，如：npm run dev:one ,就可以传入相应的环境变量
	"scripts": {
	    "dev:one": "cross-env ENTRY=one webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
	    "build:one": "cross-env ENTRY=one node build/build.js",
	    "dev:two": "cross-env ENTRY=two webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
	    "build:two": "cross-env ENTRY=two node build/build.js",
	    "dev:three": "cross-env ENTRY=three webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
	    "build:three": "cross-env ENTRY=three node build/build.js",
	    "unit": "jest --config test/unit/jest.conf.js --coverage",
	    "e2e": "node test/e2e/runner.js",
	    "test": "npm run unit && npm run e2e",
	    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs"
	  }
	  ...
  }

2、修改webpack.base.conf.js文件
修改入口文件路径和项目中引用资源、组件时使用的路径的别名，如下图：

3、修改webpack.dev.conf.js、webpack.prod.conf.js文件
修改入口模板html文件,如下图：

webpack.dev.conf.js
webpack.prod.conf.js

4、修改config/index.js
修改编译后的文件在dist目录下的结构，如下图：

5、项目中组件和资源的引用

	// 引用公共组件
	import ruleTitle from 'src/components/RuleTitle'
	// 引用当前项目下的组件
	import ruleContent from '@/componentsDif/RuleContent'

6、运行项目或编译
执行命令：npm run dev:one或npm run build:one

总结：

总而言之，核心思想就是跟进编译命令传入环境变量，利用环境变量和别名的配置来差异化打包。比较难的是如何控制组件的颗粒度，如何拆分组件，这个需要跟据需求的不同来实际定制。

参考文档：https://segmentfault.com/a/1190000015424032、https://www.jianshu.com/p/4522f4ee2350