介紹

根據需求，我們希望建立一個多頁面的vue.js項目，如何改造單頁面vue.js項目為多頁面項目？跟著我的步伐看下去吧.

1.創建單頁面vue.js項目

簡單的記錄一下創建步驟：

--安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
--安裝vue-cli
npm install -g vue-cli
--安裝webpack並新增目錄
vue init webpack sp-demo01
--進入項目目錄
cd sp-demo01
--更新
npm install
--運行
npm run dev
--構建
npm run build

2.配置路由映射

在utils.js文件末尾添加如下代碼，用於自動建立路由映射，如下圖：

// glob是webpack安裝時依賴的一個第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js尾碼名的文件
var glob = require('glob')
// 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相應的頁面路徑，因為之前的配置，所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用於做相應的merge處理
var merge = require('webpack-merge')

// 多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js尾碼文件，如果該文件存在
// 那麼就作為入口處理
exports.entries = function () {
  let startPath = 'src/pages/'
  // 應該讀取js文件，但是這裡限定js與html文件名一致，所以讀取html文件
  var entryFiles = glob.sync(PAGE_PATH + '/**/*.html')
  var map = {}
  entryFiles.forEach((filePath) => {
    var dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
    var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
    var filename = filePath.substring(filePath.lastIndexOf(startPath) + startPath.length, filePath.lastIndexOf('/'))
    if (filename.endsWith(dirName)) {
      map[filename] = filePath.substring(0, filePath.lastIndexOf('.html')) + '.js'
    }
  })
  console.log(map)
  return map
}

修改webpack.base.conf.js文件內容，在啟動時調用映射方法，如下圖：

3.配置頁面映射

在utils.js文件末尾添加如下代碼，用於自動建立頁面映射，如下圖：

// 多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html尾碼文件，然後放入數組中
exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/**/*.html')
  let startPath = 'src/pages/'
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf(startPath) + startPath.length, filePath.lastIndexOf('/'))
    let conf = {
      // 模板來源
      template: filePath,
      // 文件名稱
      filename: filename + '.html',
      // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  console.log(arr)
  return arr
}

在啟動時調用頁面映射方法，如下圖：

4.註意 

1.由於代碼中的限制，如下圖所示，test2.html與test2.js名稱一致，test3.html與test3.js名稱一致，所以每個頁面的js與html文件必須一致。

2.由於代碼中的限制，如下圖所示，所有頁面必須在src/pages目錄下。

3.以上2個問題可自行修改步驟2與3中的代碼進行自定義。

5.完整結構，如下圖：

6.test3頁面

 7.Test3與Test1運行效果