本文主要介紹了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' } ...}下面需要修改webpack.dev,conf.js文件了，這里主要是修改原來配置的首頁,這里需要配置多個頁面
webpack.dev.conf.js
var path = require('path');var config = require('../config')var webpack = require('webpack')var merge = require('webpack-merge')var utils = require('./utils')var baseWebpackConfig = require('./webpack.base.conf')var HtmlWebpackPlugin = require('html-webpack-plugin')Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])})module.exports = merge(baseWebpackConfig, { ...});//新增var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);for (var pathname in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 inject: true, // js插入位置 chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf));}這里這要是改變了new HtmlWebpackPlugin的conf對象，原來的配置的是單個html,現在通過循環pages對象，生成多個html配置對象。
通過上面的配置，當我們執行npm run dev 的時候，webpack就可以同時便于多個頁面，然后將前面wenpack.base.conf.js中配置的js文件，插入到對應的html頁面中。
這個時候我們運行項目npm run dev 然后我們就可以訪問不同的頁面了，這里需要注意一下，既然我們需要管理多個頁面，我們就應該在src下建立一個目錄專門來訪放不同的頁面。這樣項目結構看起來更加清晰，便于維護。
這是我寫的一個demo地址，有興趣的可以拉下來看看vue-cli-multi-page
運行起來后訪問http://localhost:8080/module/index.html,然后點擊按鈕，打開新頁面。
上面這樣配置只是開發環境，最后生產環境的配置文件webpack.prod.conf.js也需要修改，這樣在生產打包的時候就可以同時在dist中生成多個html文件。
webpack.prod.conf:
var path = require('path')var config = require('../config')var utils = require('./utils')var webpack = require('webpack')var merge = require('webpack-merge')var baseWebpackConfig = require('./webpack.base.conf')var ExtractTextPlugin = require('extract-text-webpack-plugin')var HtmlWebpackPlugin = require('html-webpack-plugin')var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目錄文件var env = config.build.envvar webpackConfig = merge(baseWebpackConfig, {...}//這里是修改的部分，和webpack.dev.conf.js的修改是一樣的module.exports = webpackConfigvar pages =utils.getEntry(['./src/module/**/*.html']);for (var pathname in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: pathname + '.html',//生成 html 文件的文件名 template: pages[pathname], // 根據自己的指定的模板文件來生成特定的 html 文件。這里的模板類型可以是任意你喜歡的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定義的模板文件時，需要提前安裝對應的 loader， inject: true, // 注入選項。有四個選項值 true, body, head, false.true:默認值，script標簽位于html文件的 body 底部,body:同 true,head:script 標簽位于 head 標簽內,false:不插入生成的 js 文件，只是單純的生成一個 html 文件 // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf));}以上就是使用vue-cli腳手架來解決vue多頁面開發的解決方案，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
