vue2.0 + webpack2.0 构建多页面应用

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.编写，各模块代码，运行项目