搭建Vue+Express双模板脚手架03

现在基本上比较成熟的部署方式就是Docker镜像化部署，微服务的概念早已经深入人心，所以这里希望完成的Vue+Express脚手架能够初始化的项目代码结构为：

vue&Express目录结构.jpg

前后端分离，相互独立，相当于两个微服务，这里的server就是在02中经过改造后的后端目录结果，webapp就是使用Vue-cli自动生成的目录结构。

我们都知道直接使用vue init命令生成的只是webapp，而没有server,这主要是由于webpack模板导致的，这一章节主要就是对webpack的模板做简单的修改，使其能够在vue init命令执行之后，生成我们想要的Vue+Express目录结构。

webpack模板

webpack模板可以去github上面下载，下载完成之后，将其置放于下面的路径中：

webpack模板的存放路径.jpg

源码目录结构为：

webpack模板源码结构.jpg

这里主要关注上面两个红色标注的文件以及文件夹template就是脚手架实际生成的项目代码目录，这两个地方都需要进行修改才能满足要求。

template文件夹改造

改造前里面只有Vue前端的初始化代码：

template中webapp目录.jpg

改造后的template目录机构为：

改造后template目录结构.jpg

webapp就是改造后的Vue源码目录，server就是之前改造后的目录结构：

template中server目录结构.jpg

其它文件改造

这一章节不做过多的改造，目的只是能够成功生成期望目录结构的静态站点，不去考虑修改与用户交互的内容。由于template的目录结构做了蛮大的变化，所以需要去阅读整个的渲染过程，不然直接执行vue init命令会报错，各种目录找不到等。。具体的源码就不带大家读了，直接提示的两个地方：

//meta.js中179行，complete函数主要是执行npm install安装依赖
const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName, 'webapp')

//utils/index.js 13行
const packageJsonFile = path.join(
    data.inPlace ? '' : data.destDirName,
    'webapp/package.json'
)

缺陷

到目前为止，使用vue init命令生成的目录结构已经是我们期望的目录，但是我们还有更高的要求：

1. server端也要和webapp一样，能够自动的安装依赖包。
2. 能够让用户选择是否需要server，还是说只想要Vue前端框架即可，所以要动态配置，读取用户的选择后，动态渲染模板。