本文主要介紹了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' } ...}