现在基本上比较成熟的部署方式就是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命令生成的目录结构已经是我们期望的目录，但是我们还有更高的要求：
- server端也要和webapp一样，能够自动的安装依赖包。
- 能够让用户选择是否需要server，还是说只想要Vue前端框架即可，所以要动态配置，读取用户的选择后，动态渲染模板。
网友评论