前言
从接触vue开始用的是vue-cli直接搭建单页应用，参考配合着vue-router开发起来简直爽到吊炸天，但是由于项目越来越复杂了，单页用起来可能有点力不从心，能不能弄成多页面呢，查了相关资料得到的结论是完全可以的，能多页面多入口，并且可以使用组件，还引入jQuery，这简直完美了，这个demo是从我已经改造完成的项目中摘出来的，现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目。
技术栈
- vue: 2.0.1
- vue-resource：1.0.3
- vue-router：2.0.0
- webpack：1.13.2
- gulp：3.9.1
- ES6
运行
改造后的目录
公共的js和样式图标放到assets文件夹即可
修改点
build/utils.js
exports.assetsPath = function(_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production' ?
config.build.assetsSubDirectory :
config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory,_path)
}
exports.cssLoaders = function(options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders(loaders) {
var sourceLoader = loaders.map(function(loader) {
var extraParamChar
if (/\?/.test(loader)) {
loader = loader.replace(/\?/,'-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader',sourceLoader)
} else {
return ['vue-style-loader',sourceLoader].join('!')
}
}
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
return {
css: generateLoaders(['css']),postcss: generateLoaders(['css']),less: generateLoaders(['css','less']),sass: generateLoaders(['css','sass?indentedSyntax']),scss: generateLoaders(['css','sass']),stylus: generateLoaders(['css','stylus']),styl: generateLoaders(['css','stylus'])
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\.' + extension + '$'),loader: loader
})
}
return output
}
//增加获取多入口的方法 注意 这个参数是个数组
exports.getEntry = function(globPaths) {
var entries = {},basename,tmp,pathname;
for (globPath of globPaths) {
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry,path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0,1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
});
}
console.log(entries);
return entries;
}
webpack.base.conf.js
webpack.dev.conf.js
module: {
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},// eval-source-map is faster for development
devtool: '#eval-source-map',plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: 'index.html',// template: 'index.html',// inject: true
// })
]
})
var pages = utils.getEntry(['./src/module/*/.html','./src/m/*/.html']);
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',template: pages[pathname],// 模板路径
favicon: './src/assets/images/wechat.png',inject: true // js插入位置
};
if (pathname in module.exports.entry) {
conf.chunks = ['vendors',pathname];
conf.hash = true;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
webpack.prod.conf.js
module: {
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap,extract: true })
},devtool: config.build.productionSourceMap ? '#source-map' : false,output: {
path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},vue: {
loaders: utils.cssLoaders({
sourceMap: config.build.productionSourceMap,extract: true
})
},plugins: [
// http://vuejs.github.io/vue-loader/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,drop_debugger: true,drop_console: true
}
}),new webpack.optimize.OccurenceOrderPlugin(),// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: process.env.NODE_ENV === 'testing' ?
// 'index.html' : config.build.index,// favicon: './src/assets/images/tjd.ico',// inject: true,// minify: {
// removeComments: true,// collapseWhitespace: true,// removeAttributeQuotes: true
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// chunksSortMode: 'dependency'
// }),// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',minChunks: function(module,count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname,'../node_modules')
) === 0
)
}
}),// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',chunks: ['vendor']
})
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp(
'\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),threshold: 10240,minRatio: 0.8
})
)
}
var pages = utils.getEntry(['./src/module/*/.html','./src/m/*/.html']);
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',inject: true // js插入位置
};
if (pathname in pages) {
conf.chunks = ['vendors',pathname];
conf.hash = true;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
git地址：nofollow" target="_blank" href="https://github.com/dawnyu/vue-cli-multipage.git">https://github.com/dawnyu/vue-cli-multipage.git
