vue的單頁面應用開發會把頁面中所有的文件都會打包在build.js文件中，這樣可能這個文件變得很大，對性能，體驗都不是很好的選擇；

單頁面應用改為多頁面應用的方法：

• 開始改造

最主要的一步，將webpack進行改造以滿足對多頁面需求的支持，其實多頁面，即是webpack有多個入口。在此步中，我們主要的操作的對象是 build文件夾下的js文件。

• 首先，我們對 utils.js進行改造
• 添加一個方法：getEntries，方法中需要使用到node的globa模塊，所以需要引入

  // glob模塊，用於讀取webpack入口目錄文件
var glob = require(‘glob‘);
 

  exports.getEntries = function (globPath) {

• 其次，對webpack.base.conf.js進行改造
• 刪除 entry: {app: ‘./src/main.js‘},，取而代之如下：

  module.exports = {
      ···
      entry: utils.getEntries(‘./src/module/**/*.js‘),

• 最後改造webpack.dev.conf.js和webpack.prod.conf.js
• 移除原來的HtmlWebpackPlugin

var pages = utils.getEntries(‘./src/module/**/*.html‘) for(var page in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: page + ‘.html‘, template: pages[page], //模板路徑 inject: true, // excludeChunks 允許跳過某些chunks, 而chunks告訴插件要引用entry裏面的哪幾個入口 // 如何更好的理解這塊呢？舉個例子：比如本demo中包含兩個模塊（index和about），最好的當然是各個模塊引入自己所需的js， // 而不是每個頁面都引入所有的js，你可以把下面這個excludeChunks去掉，然後npm run build，然後看編譯出來的index.html和about.html就知道了 // filter：將數據過濾，然後返回符合要求的數據，Object.keys是獲取JSON對象中的每個key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }) } // 需要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }　　

• 打開工程

npm run dev

在dev.server.js 文件中有打開的路徑，直接跟你想要打開的html文件名

如：

var uri = ‘http://localhost:‘ + port +‘/xxx.html‘

VUE2X實戰開發隨筆(二)