基于Vue-cli的多目录项目配置

直接用vue-cli创建的项目可以创建一个单页面应用，开发环境和生产环境都是以一个单独的项目为目录的。在写一些有共性的模块时需要将所有组件放在同一个大的框架下的同时又需要每个模块可以进行单独的启动和打包。此时就需要进行个性化配置。

场景：需要src下不是一个单独的模块而是一组同一个大的项目的模块组。将单独的模块组放在文件夹module下，而将一些通用的通用css、通用js配置或方法、通用图片、以及vue组建等通用模块放在common中。此时构建的目录结构大致如下：
—build
—config
—node_modules
—src
——common
————js
————css
————pic
————components
——module
————head
—————index.html
—————src
———————assets
———————components
———————router
———————app.vue
———————main.js
————face
————hand
————body
————foot
——package
—package.json

需要对webpack打包文件进行配置，可以使用以下命令启动和打包单独的模块：

npm run dev 
npm run build 

对单独的每个模块进行开发和打包。例如：运行npm run dev demo来对demo模块进行开发模式的启动。为实现以上目的，首先要看一下vue-cli自带的原配置。首先先查看原先的package.json来看看自带的配置都做了写什么。package.json中关于script的配置如下：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

关于package.json中的script配置：npm 允许在package.json文件里面，使用scripts字段定义脚本命令
也就是说相当于运行npm run命令时会按照package.json中的命令来进行脚本运行而无需自己在命令行中输入那么长的脚本命令。关于npm script想了解更多的话可以看看阮一峰老师的npm scripts 使用指南

首先对开发环境的dev命令运行进行配置更改，原配置中执行dev实际上运行的是
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
这条命令启动webpack-dev-server模块并将配置参数传入，关于配置参数--是webpack声明参数的方式，在我们运行dev时传入的参数包括：

• inline： 布尔值，用于在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。也可以使用 iframe 模式，它在通知栏下面使用