vue-cli脚手架改造多页应用框架

1. 先使用vue-cli 执行vue init webpack myapp初始化项目
2. 进入/build/webpack.base.conf.js文件中，在entry项配置多入口:

entry: {
    home: './src/page/home/main.js',
    result: './src/page/result/main.js',
    vote: './src/page/vote/main.js'
}

1. 修改开发环境中的plugins，进入/build/webpack.dev.conf.js文件：

//  预热场/主会场
new HtmlWebpackPlugin({
    filename: 'home.html',
    template: 'home.html',
    inject: true,
    chunks: ['home']
}),
//  投票页
new HtmlWebpackPlugin({
    filename: 'vote.html',
    template: 'vote.html',
    inject: true,
    chunks: ['vote']
}),
//  结果页
new HtmlWebpackPlugin({
    filename: 'result.html',
    template: 'result.html',
    inject: true,
    chunks: ['result']
}),
new FriendlyErrorsPlugin()

chunks对应的是webpack.base.conf.js中entry对应的名字，作用是每次编译运行时一个入口对应一个entry，如果没写则引入所有页面资源。

1. 配置生产环境，进入/config/index.js文件，修改build属性配置项：

build: {
    home: path.resolve(__dirname, '../dist/home.html'),
    vote: path.resolve(__dirname, '../dist/vote.html'),
    result: path.resolve(__dirname, '../dist/result.html')
}

1. 然后进入/build/webpack.prod.conf.js文件，添加HtmlWebpackPlugin:

new HtmlwebpackPlugin({
    filename: config.build.home,
    template: 'home.html',
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: false
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest', 'vendor', 'home']
}),
new HtmlwebpackPlugin({
    filename: config.build.vote,
    template: 'vote.html',
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: false
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest', 'vendor', 'vote']
}),
new HtmlwebpackPlugin({
    filename: config.build.result,
    template: 'result.html',
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: false
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest', 'vendor', 'result']
})

最终的项目目录结构是:

├── README.md                       项目介绍
├── home.html                       主会场/预热场页面
├── vote.html                       主会场投票页面
├── result.html                       主会场入口页面
├── build                           构建脚本目录
│   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面
│   ├── build.js                        生产环境构建脚本
│   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│   ├── dev-server.js                   运行本地开发服务器
│   ├── utils.js                        构建相关工具方法
│   ├── webpack.base.conf.js            wabpack基础配置
│   ├── webpack.dev.conf.js             wabpack开发环境配置
│   └── webpack.prod.conf.js            wabpack生产环境配置
├── config                          项目配置
│   ├── dev.env.js                      开发环境变量
│   ├── index.js                        项目配置文件
│   ├── prod.env.js                     生产环境变量
│   └── test.env.js                     测试环境变量
├── mock                            mock数据目录
│   └── hello.js
├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src                             源码目录
│   ├── main.js                         入口js文件
│   ├── app.vue                         根组件
│   ├── components                      公共组件目录
│   │   └── title.vue
│   ├── assets                          资源目录，这里的资源会被wabpack构建
│   │   └── images
│   │       └── logo.png
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           应用级数据（state）
│   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
├── static                          纯静态资源，不会被wabpack构建。
└── test                            测试文件目录（unit&e2e）
    └── unit                            单元测试
        ├── index.js                        入口脚本
        ├── karma.conf.js                   karma配置文件
        └── specs                           单测case目录
            └── Hello.spec.js