1.全局安装vue-clinpm install -g vue-cli
2.基于webpack项目模板创建项目vue init webpack demo
3.在模板项目的基础上,调整项目目录结构
在src目录下新建modules,pages文件夹用来存放模块和页面。实际项目的每个页面都再单独建一个文件夹并存放在pages文件夹中。注意pages下每个文件夹下的各页面入口js文件必须和模板文件(html文件)的名称保持一致。
src目录结构:
components存放公用组件
router存放页面的路由配置
assets存放页面的静态资源
modules存放公用模块
pages存放页面
4.在build/utils.js中按以下内容修改变量声明,并添加两个方法:webpack多入口文件和多页面输出
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
var merge = require('webpack-merge')
var packageConfig = require('../package.json')
//多入口配置
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
//多页面输出配置
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
let conf = {
template: filePath,
filename: filename + '.html',
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
chunks: ['manifest', 'vendor', filename],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
5.修改build/webpack.base.conf.js的入口配置
module.exports = {
entry: utils.entries(),
...
6.修改build/webpack.dev.conf.js和build/webpack.prod.conf.js的多页面配置:把原有的页面模板配置注释或删除,并把多页面配置添加到plugins
webpack.dev.conf.js:
plugins: [
......
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
......
].concat(utils.htmlPlugin())
webpack.prod.conf.js:
plugins: [
......
// new HtmlWebpackPlugin({
// filename: config.build.index,
// template: 'index.html',
// inject: true,
// minify: {
// removeComments: true,
// collapseWhitespace: true,
// removeAttributeQuotes: true
// },
// chunksSortMode: 'dependency'
// }),
......
].concat(utils.htmlPlugin())
多页面应用创建完毕,在pages目录下创建应用对应的页面文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。