新版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

到此多頁面配置完成。