vue-cli配置多页面项目

背景：vue-cli版本3.0

省略初始化项目；默认的App.vue和index.html文件可以删掉

页面结构如上图，新加的home可以不要，注意下面的文件路径就行

接下来修改配置文件：

1、修改build/utils.js

/* 这里是添加的部分 ---------------------------- 开始 */

// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
const glob = require('glob')
// 页面模板
//获取多级的入口文件
exports.getMultiEntry = function (globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-4);

    var pathsrc = tmp[0]+'/'+tmp[1];
    if( tmp[0] == 'src' ){
      pathsrc = tmp[1];
    }
    //console.log(pathsrc)
    pathname = pathsrc + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;

    //console.log(pathname+'-----------'+entry);

  });

  return entries;

}


var fs = require( 'fs' ),
  copyStat = fs.stat;

/*
 * 复制目录中的所有文件包括子目录
 * @param{ String } 需要复制的目录
 * @param{ String } 复制到指定的目录
 */
var filecopy = function( src, dst ){
  // 读取目录中的所有文件/目录
  fs.readdir( src, function( err, paths ){
    if( err ){
      throw err;
    }
    paths.forEach(function( path ){
      var _src = src + '/' + path,
        _dst = dst + '/' + path,
        readable, writable;
      copyStat( _src, function( err, st ){
        if( err ){
          throw err;
        }
        // 判断是否为文件
        if( st.isFile() ){
          // 创建读取流
          readable = fs.createReadStream( _src );
          // 创建写入流
          writable = fs.createWriteStream( _dst );
          // 通过管道来传输流
          readable.pipe( writable );
        }
        // 如果是目录则递归调用自身
        else if( st.isDirectory() ){
          exports.startCopy( _src, _dst );
        }
      });
    });
  });
};

//在复制目录前需要判断该目录是否存在，不存在需要先创建目录
exports.startCopy = function( src, dst ){
  fs.exists( dst, function( exists ){
    // 已存在
    if( exists ){
      filecopy( src, dst );
    }
    // 不存在
    else{
      fs.mkdir( dst, function(){
        filecopy( src, dst );
      });
    }
  });
};
/* 这里是添加的部分 ---------------------------- 结束 */

2、修改build/webpack.base.conf.js 入口配置

注意：获取入口js文件时，utils.getMultiEntry('./src/views/**/**/*.js');这里的路径要按实际路径配置，我的页面包了一层home，所以这里这么写

3、修改build/webpack.dev.conf.js

原本的plugins配置：

需要去掉红框的部分，重写HtmlWebpackPlugin插件

let pages =  utils.getMultiEntry('./src/views/**/**/*.html');
for (let pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    chunks: [pathname, 'vendors', 'manifest'], // 每个html引用的js模块
    inject: true              // js插入位置
  };
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

4、修改build/webpack.pro.conf.js 同上

至此修改完成。

主要思路就是把webpack的单入口文件改成多入口文件。

1：使用glop和fs模块获取多级入口文件

2：循环生成多个HtmlWebpackPlugin对象，从而生成多个html入口文件

vue-cli配置多页面项目

猜你喜欢