Vue-cli脚手架构建多页面项目

github项目地址：https://github.com/YHQQ521/vue-cli-

一、创建项目

vue init webpack ma

二、修改build文件夹下的utils.js

1、 引入glob插件



代码：

var glob = require('glob')

2、 在utils.js文档的底部加入这段代码（用于获取多个入口文件）：

//获取多级的入口文件
exports.getMultiEntry = function (globPath) {
var entries = {},
basename, tmp, pathname;

glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-4);

var pathsrc = tmp[0]+'/'+tmp[1];
if( tmp[0] == 'src' ){
pathsrc = tmp[1];
}
//console.log(pathsrc)
pathname = pathsrc + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;

//console.log(pathname+'-----------'+entry);

});

return entries;

}

三、修改build文件夹下的webpack.base.conf.js

删除这段代码entry: {app: './src/main.js'},，更换为以下代码

module.exports = {
···
entry: utils.getMultiEntry('./src/views/**/*.js'),
···
}

四、修改build文件夹下的webpack.dev.conf.js

1、将下面的代码注释掉：



更换为如下代码：

new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: chunks,
minChunks: 4 || chunks.length
}),

2、在文件底部加入这段代码：

var pages =utils.getMultiEntry('./src/views/**/*.html')
for(var page in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: page + '.html',
template: pages[page], //模板路径
inject: true,
// excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
// 如何更好的理解这块呢？举个例子：比如本demo中包含两个模块（index和about），最好的当然是各个模块引入自己所需的js，
// 而不是每个页面都引入所有的js，你可以把下面这个excludeChunks去掉，然后npm run build，然后看编译出来的index.html和about.html就知道了
// filter：将数据过滤，然后返回符合要求的数据，Object.keys是获取JSON对象中的每个key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
})
}
console.log(page);
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

五、修改build文件夹下的webpack.prod.conf.js

1、加入这段代码：



代码如下：

var entries =  utils.getMultiEntry('./src/'+'views'+'/**/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);

2、将这段代码注释掉：



3、将这段代码注释掉：



4、在文件底部加入这段代码：

var pages = utils.getMultiEntry('./src/views/**/*.html')
for(var page in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: page + '.html',
template: pages[page], // 模板路径
chunks: ['vendor',page], // 每个html引用的js模块
inject: true,              // js插入位置
hash:true
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

六、修改config文件夹中的index.js

最后，如果你对vuejs感兴趣可以加入该群，我们大家一块交流学习：