详解webpack编译多页面vue项目的配置问题

 本文主要介绍了webpack编译多页面vue项目的配置问题，分享给大家，具体如下：

一般情况下，构建一个vue项目的步骤为：

1，安装nodejs环境

2，安装vue-cli

cnpm install vue-cli -g 

3，构建vue项目

vue init webpack-simple vue-cli-multipage-demo 

4， 安装项目依赖包

cnpm install 

5，在开发环境下运行该项目：

npm run dev 

通过上面这几步一个简单的vue项目的开发环境基本就搭建起来，接下来的工作就是填代码了。

最近在做一个前端代码重构的时候发现一个问题，使用这个脚手架构建的项目满足不了我的需求，其实这个需求有一点违背我们vue的初衷的，vue开发的是单页面应用(SPA),这里我需要他实现多页面的效果。什么意思呢？举个例子：我们在网页开发的时候，有时候点击一个连接，浏览器会新代开一个tab页来显示我们的内容，这个时候其实就出现多页面的情况了，新开的这个页面其实已经不属于我们之前的那个页面，(SPA)其实是通过路由的方式，让多个页面在主页面中显示。但是这个时候新开的页面已经脱离主页面了。

通过vue-cli脚手架构建的项目的webpack配置文件支持单页面的应用开发，他只有一个入口文件。而且最后只会生产一个页面。如何才能满足我的需求，让webpack同时便于多个页面呢，其实还是比较简单的，只需要将webpack稍微改装一下，就完全可以了。

首先我们需要在build文件下的utils.js文件家中增加一个获取文件夹中文件路径的方法,这个方法将目标文件解析成对象的形式。
utils.js

var glob = require("glob");//分析文件夹中文件路径的第三方模块exports.getEntry = function(globPath) { var 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;  } }); }); return entries;}

然后修改wenpack.base.conf.js文件，修改入口文件，原来的文件是单文件，现在需要将单文件入口改成多文件入口了。

webpack.dev.conf.js

var path = require('path')var config = require('../config')var utils = require('./utils')var projectRoot = path.resolve(__dirname, '../')var glob = require('glob');var entries = utils.getEntry(['./src/module/**/*.js']); // 获得多页面的入口js文件var env = process.env.NODE_ENV// various preprocessor loaders added to vue-loader at the end of this filevar cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)var useCssSourceMap = cssSourceMapDev || cssSourceMapProdmodule.exports = { entry: entries,//这是通过前面新增的方法获取的文件路径对象 output: { path: config.build.assetsRoot, publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, filename: '[name].js' } ...}