vue多页应用

首先我的结构是这样的

修改文件之前 需要下载一个依赖 "glob": "^7.0.3"

添加到 package.json 中的对象 devDependencies 中

主要修改的是build中的四个文件

第一个修改utils 文件

修改的位置放置到  exports.styleLoaders 的下边

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹

//其中 "/src/pages/" 放置的就是你的html文件以及其他的一些相关配置
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
var merge = require('webpack-merge')
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        map[filename] = filePath
    })
    return map
}

//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let conf = {
            // 模板来源
            template: filePath,
            // 文件名称
            filename: filename + '.html',
            // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
            chunks: ['manifest', 'vendor', filename],
            inject: true
        }
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: 'dependency'
            })
        }
        arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
}

第二个文件 webpack.base.conf

入口修改——  entry: utils.entries()

第三个修改的文件webpack.dev.conf

第四个文件webpack.prod.conf

注释掉plugins对象中的 new HtmlWebpackPlugin({})

然后在尾部添加

接下来你就可以你的多页应用开发了，其他操作和原来不变。

当然 跳页需要注意，路径必须这么写

<a href="login.html#/路由名称">login me</a>

如果路径不这么写，打包之后就会出问题