新版vue-cli搭建多页应用2

以前写过一篇博客，可是那个用起来有问题，是在一个页面中写了几个a标签连接的几个页面，开发起来很差用。全部又改造了此方法。

访问方式为，http://192.168.10.65:8000/rank.html或者http://192.168.10.65:8000/record.html

首先文件结构以下，一个页面对应一个文件夹，此文件夹下都是关于此页面的东西。

首先工具函数添加如下代码 （utils.js）

const glob = require('glob')

exports.getEntry = function (globPath) {
  let entries = {},
    basename, tmp, pathname;
  if (typeof (globPath) != "object") {
    globPath = [globPath]
  }
  globPath.forEach((itemPath) => {
    glob.sync(itemPath).forEach(function (entry) {
      basename = path.basename(entry, path.extname(entry));
      if (entry.split('/').length > 4) {
        tmp = entry.split('/').splice(-3);
        pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
        entries[pathname] = entry;
      } else {
        entries[basename] = entry;
      }
    });
  });
  // console.log(entries)
  return entries;
}

接着修改webpack.base.conf.js,添加

const entries = utils.getEntry(['./src/**/*.js']) // 得到入口js文件

修改入口文件

在修改webpack.dev.conf.js

注释如下代码

而后添加添加如下代码

const pages = utils.getEntry('./*.html')
for (let pathname in pages) {
  // 配置生成的html文件，定义路径等
  let conf = {
    filename: pathname + '.html',
    template: pages[pathname],   // 模板路径
    inject: true,   // js插入位置
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
    // chunks: ['manifest', 'vendor', pathname],
    // hash: true
  };

  if (pathname in baseWebpackConfig.entry) {
    conf.chunks = ['manifest', 'vendor', pathname]
    conf.hash = true
  }

  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

最后修改webpack.prod.conf.js文件

注释这段代码

添加如下代码

const pages = utils.getEntry('./*.html')
for (let pathname in pages) {
  // 配置生成的html文件，定义路径等
  let conf = {
    // filename: pathname + '.html',
    filename: config.build[pathname],
    template: pages[pathname],   // 模板路径
    inject: true,              // js插入位置
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest', 'vendor', pathname]
  }

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

最后修改config下的index.js

添加

const glob = require('glob')

function getEntry(globPath) {
  let entries = {}, basename, tmp, pathname
  if (typeof (globPath) != "object") {
    globPath = [globPath]
  }
  globPath.forEach((itemPath) => {
    glob.sync(itemPath).forEach(function (entry) {
      basename = path.basename(entry, path.extname(entry));
      if (entry.split('/').length > 4) {
        tmp = entry.split('/').splice(-3)
        pathname = tmp.splice(0, 1) + '/' + basename // 正确输出js和html的路径
        entries[pathname] = entry
      } else {
        entries[basename] = entry
      }
    })
  })
  // console.log(entries)
  return entries;
}

build对象里面的index注释掉

添加

const pages = getEntry('./*.html')
let buildobj = indexObj.build
// console.log(buildobj)
for (let pathname in pages) {
  // 配置生成的html文件，定义路径等
  for (let filename in buildobj) {
    // console.log("pathname" + pathname)
    // console.log("filename" + filename)
    if (pathname === filename) { throw new Error("不能取相同的名称")}
    buildobj[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
  }
}

module.exports = indexObj

到此多页面配置完成。