?

折騰了好久，終于把坑踩完了，廢話不多說，上教程~

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

?

另外推薦一下我另一篇博客，我覺得這篇好用，附上地址https://my.oschina.net/u/3219445/blog/1596818

?

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 CommonsChunkPluginchunksSortMode: '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 CommonsChunkPluginchunksSortMode: 'dependency'};if (pathname in module.exports.entry) {conf.chunks = ['manifest', 'vendor', pathname]conf.hash = true}module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

到此多頁面配置完成。

?