創建多頁面vue.js項目

介紹

根據需求，咱們但願創建一個多頁面的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運行效果