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的多页面项目就配置完成了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值