VUE多页面

基本原则

1、entry 配置多个js文件

　　webpack.base.config.js，修改entry部分：

　　原来只有一个：

　　

  entry: {
    app: "./src/main.js"
  },

　　修改成自己的多个js文件， 我的是放在src/page下存放多个页面，每个页面一个文件夹，下面分别是  page1/page1.js, page2/page2.js 这两个js文件, 目录示意如下：

　　./src

　　　　page

　　　　　　page1

　　　　　　　　page1.js

　　　　　　　　page1.html

　　　　　　　　page1.vue

　　　　　　page2

　　　　　　　　page2.js

　　　　　　　　page2.html

　　　　　　　　page2.vue

　　entry这样改:

  entry: {
    page1: "./src/page/page1/page1.js",
    page2: "./src/page/page1/page2.js"
  },

2、plugins中允许多个html模板

　　这个需要修改webpack.dev.config.js和webpack.prod.config.js

　　原来的  new HtmlWebpackPlugin，修改tempage, filename，分别对应page1, page2的目录即可

3、如果使用history路由，本机调试时，需要配置不同路由对应的html页面名

　　修改webpack.dev.config.js的devServer->historyApiFallback->rewrites:

　　　　{ from: /^\/page2/, to: path.posix.join(config.dev.assetsPublicPath, 'page2.html') },

　　　　{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'page1.html') },

　　在路由地址上做区分，需要page2.html解析的路由，我都在路径中有/page2/开头， 其它的全部默认使用page1.html解析（根据个人的情况修改这里，如果不使用history方式，不需要修改这里）

 

 

如果你的页面个数是要可枚举的，直接修改1、2在config里写死也是可以的（就按上面的方式即可）

（参考：https://www.cnblogs.com/moqiutao/p/8522293.html）

上面是写死在代码中的方式，下面是“非写死”的方式

1、utils.js中最后增加(要安装glob包)

// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
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
    })
    console.log(map)
    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))
    })
    // console.log(arr)
    return arr
}

2、webpack.base.config.js修改entry处为： entry: utils.entries(),

3、webpack.dev.config.js/ webpack.prod.config.js中的HtmlWebpackPlugin注释掉，在plugins:[...] 后面直接加上  .concat(utils.htmlPlugin())    

 

然后，就没有了，以后需要增加页面，就直接在./src/page/目录下增加文件夹就可以了。当然，你也可以将这个路径改成可配置的，我这里就懒得改了。

 

最后补充一下：多页面之前路由跳转使用vue路由方式是不行的，只能通过location.href这种方式

 

最最后吐糟一下， 一直都是单页应用的，被逼改成多页应用，已经实现了的代码，业务要加一些超炫的页面进来，找人写好了HTML，要往里面填数据，一堆全局CSS，absolute布局，不想重写他们提供的CSS了，他们等着看成果。改成多页面，和原来的布局、CSS全部分开。