對于某些項目來說，單頁面不能很好的滿足需求，所以需要將vue-cli創建的單頁面項目改為多頁面項目。
需要修改以下幾個文件：
1、下載依賴glob
$npm install glob --save-dev
2、修改build下的文件
（1）修改webpack.base.conf.js
添加以下代碼：
var glob = require('glob')；var entries = getEntry('./src/pages/**/*.js')將module.exports中的
entry: { app: './src/main.js' },注釋掉，然后添加這一行代碼：
entry: entries,
至于entries是什么，別急呀，看下面：
添加一個方法：
//獲取入口js文件function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); pathname = basename.split("_")[0]; //index_main.js得到index entries[pathname] = entry; }); return entries;}這個文件修改成這樣子就可以了。
（2）修改webpack.dev.conf.js
添加以下代碼：
//引入var glob = require('glob')var path = require('path')將module.exports中的plugins里的
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true}),注釋掉，然后添加以下代碼：
function getEntry(globPath) { var entries = {},basename; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); entries[basename] = entry; }); return entries;}var pages = getEntry('src/pages/**/*.html');for (var pathname in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 inject: true, // js插入位置 chunks:[pathname] }; module.exports.plugins.push(new HtmlWebpackPlugin(conf));}這個文件修改到此就可以了。
（3）webpack.prod.conf.js
這個文件修改的套路與上一個文件類似
添加以下代碼： var glob = require('glob') 因為項目在創建時，生成項目的時候是直接將可選的所有依賴都選擇了yes，所以項目中的env的聲明定義如下：
但是由于webpack.test.conf.js文件目前還沒有進行修改，所以需要把這行聲明換成下面這行：
var env = config.build.env
將webpackConfig中的plugins里的
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency'}),注釋掉，在聲明定義webpackConfig的后面添加以下代碼：
function getEntry(globPath) { var entries = {}, basename; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); entries[basename] = entry; }); return entries;}var pages = getEntry('src/pages/**/*.html');for (var pathname in pages) { var conf = { filename: process.env.NODE_ENV === 'testing' ? pathname + '.html' : config.build[pathname], template: pages[pathname], inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunks:[pathname] } webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));}此時，這個文件也修改好了。
3、修改config下的文件
這個文件夾下，只需要修改一個文件：index.js 這個文件的作用是，尋找文件路徑，然后根據這個文件設置的目錄層級，生成打包后的文件以及相應的層級文件結構。 添加以下代碼：
var build = { env: require('./prod.env'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true, productionGzip: false, productionGzipExtensions: ['js', 'css']}function getEntry(globPath) { var entries = {},basename; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); entries[basename] = entry; }); return entries;}var pages = getEntry('src/pages/**/*.html'); //入口 index: path.resolve(__dirname, '../dist/index.html')for (var pathname in pages) { build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')}然后將module.exports中的build的值換成我們剛剛添加聲明的變量build。 如果希望修改打包后的目層級結構，可以在build中修改；還可以在build中增加我們需要定義的變量，比如我們需要將fabfile.py和favicon.ico拷貝到dist目錄下的a目錄下，就可以在build中定義一個屬性，
distA:path.resolve(__dirname, '../dist/a),
然后因為在webpack.prod.conf.js中已經引入了'copy-webpack-plugin'（var CopyWebpackPlugin = require('copy-webpack-plugin')），我們就可以在 webpackConfig.plugins下添加如下代碼：
new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../fabfile.py'), to: config.build.distA, template: 'fabfile.py' } ])new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../favicon.ico'), to: config.build.distA, template: 'favicon.ico' } ])在src目錄下添加pages文件夾
目錄的層級結構安排成類似于這種形式：
5、打包
做完以上修改，雖然本地運行沒有問題，但是打包后，還是會有問題，會出現報錯：webpackJsonp is not defined
解決方式如下： 在webpack.prod.conf.js文件下的for (var pathname in pages)循環中定義的conf里，添加兩行代碼：
chunksSortMode: 'dependency', // dependency 頁面中引入的js按照依賴關系排序；manual 頁面中引入的js按照下面的chunks的數組中的順序排序；chunks: ['manifest', 'vender', pathname] // 生成的頁面中引入的js，'manifest', 'vender'這兩個js是webpack在打包過程中抽取出的一些公共方法依賴，其中，'manifest'又是從'vender'中抽取得到的，所以這三個js文件的依賴關系是 pathname依賴 'vender'，'vender'依賴'manifest'.
綜上，就是本次項目從單頁面到多頁面項目的轉變歷程，關于webpack.test.conf.js文件的修改，后續修改成功后，會繼續補充添加。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
