1.vue-cli脚手架创建项目
1）进入放项目的文件夹，打开命令行工具，输入：vue init webpack mysite（其中webpack是模板名称），会在当前目录下生成一个mysite项目文件夹
2）进入项目文件：cd mysite，安装项目依赖：npm install（如果失败，则用镜像：cnpm install）
3）启动项目npm run dev，默认会直接打开一个页面，或者在浏览器中输入http://localhost:8080
2.修改项目目录结构，主要修改src目录，项目改为二级目录，方便后期修改与扩展，我这里示例建有两个页面：
项目目录结构
3.utils.js中编写公共方法获取多级入口文件
utils.js
注意：
1）需要安装node-glob， 使用命令：npm install node-glob --save
2）utils.js引入glob
4.修改webpack配置文件build/webpack.base.conf.js
主要添加如下：
5.修改build/webpack.dev.conf.js
添加如下代码：
// 配置多页面
const pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.html');
for (let pathname in pages) {
// 配置生成的html文件，定义路径等
let conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: ['manifest', 'vendors', pathname], // 每个html引用的js模块
inject: true // js插入位置
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
注意：记得把原有的HtmlWebpackPlugin注释掉
6.修改build/webpack.prod.conf.js
添加如下代码：
//构建生成多页面的HtmlWebpackPlugin配置，主要是循环生成
const pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.html');
console.log(pages)
for (let pathname in pages) {
let conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: ['manifest', 'vendor',pathname], // 每个html引用的js模块，注意公共模板的引入
inject: true, // js插入位置
hash:true
};
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
7.修改打包配置文件config/index.js
项目目录
打包资源目录
8.编写，各模块代码，运行项目
网友评论