vue-cli项目配置多页面

思路

首先要修改项目目录结构，然后修改webpack的entry和html-webpack-plugin插件

如上图所示，src/page是我的目录结构，activity和index是需要构建的两个单独的页面，page目录下的每个子目录都需要一个入口文件（main.js），一个html模板（index.html）和一个vue文件（index.vue）

entry的修改

vue项目的entry配置在build/webpack.base.conf.js中，单页面的默认配置为：

entry: {
    app: './src/main.js'
  },

在此例中，因为有activity/main.js和index/main.js两个入口，所以要将entry修改为：

entry: {
    'activity/main':  './src/page/activity/main.js',
    'index/main': './src/page/index/main.js'
  },

（注意：entry的key值（activity/main、index/main）代表了构建成功后，在dist目录下的结构为dist/activity、dist/index。如果将entry的key值分别修改为page/activity/main、page/activity/main的话，最后dist目录下的结构会成为dist/page/activity、dist/page/index。）
entry的值可以自己手动添加，也可以写个函数自动生成，示例如下：

需要引入glob

function getMultiEntry (globPath) {
  const entries = {};
  let basename, tmp, pathname;
  glob.sync(globPath).forEach(entry => {
    basename = path.basename(entry, path.extname(entry));
    let entrysplit = entry.split('/');
    tmp = entrysplit.splice(-3);

    let pathsrc = tmp[0] + '/' + tmp[1];
    if (tmp[0] == 'src') {
      pathsrc = tmp[1];
    }
    pathname = pathsrc + '/' + basename;
    pathname = pathname.replace('page/', '');    // 生成entry的key值
    entries[pathname] = entry;                   // 生成entry的value
  })
  return entries;
}

此时，webpack的entry配置可以修改为：

const entries = getMultiEntry('./src/' + config.moduleName + '/**/main.js');

module.exports = {
	entry: entries
	...
}

config.moduleName的值是在/config/index.js中配置的，在本例中为’page’，其实际意义为/src/page目录

html-webpack-plugin插件的修改

将原/build/webpack.dev.conf.js(开发环境的webpack配置文件)以及/build/webpack.prod.conf.js(执行build时的配置文件)中的html-webpack-plugin插件的配置删除，然后分别添加以下代码

const pages = getMultiEntry('./src/' + config.moduleName + '/**/index.html');

for (let pathname in pages) {
  let filename = pathname.replace('page/', '')
  let key = pathname.split('/');
  key.splice(key.length -1, 1, 'main');
  key = key.join('/');

  let conf = {
    filename: path.resolve(__dirname, '../dist/' + filename + '.html'),

    template: pages[pathname], // 模板路径

    chunks: ['manifest', 'vendor', key], // 每个html引用的js模块，注意公共模板的引入

    inject: true,              // js插入位置

    hash:true

  };

  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));

}

这样一个vue的多页面项目就配置完成了