新版vue-cli搭建多頁面應用

 

折騰了很久，終於把坑踩完了，廢話很少說，上教程~

github地址：https://github.com/guolihuaGitHub/vue-cli-multipage

 

另外推薦一下我另外一篇博客，我以爲這篇好用，附上地址http://www.javashuo.com/article/p-vevopken-ea.html

 

src目錄下的文件其實均可以刪完，沒什麼卵用，而後新建一個文件夾，module

module下的文件形式，下面的index是入口頁面

detail跟index的目錄結構同樣，是兩個單頁面，複製修改一下文件名便可

文件結構搭建完畢，下面修改配置文件。

首先工具函數添加如下代碼

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/module/*.js', './src/module/**/*.js']) // 得到入口js文件

修改入口文件

在修改webpack.dev.conf.js

註釋如下代碼

由於下面要修改devWebpackConfig這個變量，因此將其定義方式改成let

而後添加添加如下代碼

const pages = utils.getEntry(['./src/module/*.html','./src/module/**/*.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(['./src/module/*.html','./src/module/**/*.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'
  };

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

  module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

到此多頁面配置完成。