vue-cli webpack 多頁面應用配置

時間 2019-11-13

標籤 vue cli webpack 頁面應用配置简体版

原文原文鏈接

vue.js是一套構建用戶界面的前端框架html

vue-cli是vue官方的一個命令行工具，可用於快速搭建大型單頁應用前端

在現實項目中，大部分項目都是多頁的，在這裏主要記錄一下我工做中是如何配置將單頁應用改成多頁應用vue

1.安裝vue-cli: npm install -g vue-cliwebpack

2.查看可以使用的templates:npm listios

3.初始化模板：npm init webpack < project name>web

4.根據提示安裝所須要的插件vue-cli

5.創建項目後進入項目目錄：npm install npm

下邊就是相應的步驟axios

1.查看目錄結構數組

2..對目錄結構進行調整

進入src文件夾，新建文件夾，取名爲pages用於存放頁面文件，在pages裏新建一個文件夾中Index用於存放首頁，而後把下圖紅框中的文件（夾）都接進Index文件夾中，還有項目目錄下的Index.html也拉進去，如圖所示

3.將main.js改成index.js

4.能夠在pages下再增長home文件夾，裏邊放的是另外一個頁面，如圖所示

這個時候項目目錄結構已經調整完了，能夠對相應的配置文件進行修改了

5.找到build文件夾下的utils文件增長兩個方法

//多頁面配置
// 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/modules')
// 用於作相應的merge處理
var merge = require('webpack-merge')

//多入口配置
// 經過glob模塊讀取pages文件夾下的全部對應文件夾下的js後綴文件，若是該文件存在
// 那麼就做爲入口處理
exports.entries = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

    //babel-polyfill是處理axios在ie中的兼容問題
    map[filename] = ["babel-polyfill", filePath]
  })
  return map
}

//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html後綴文件，而後放入數組中
exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
      // 模板來源
      template: filePath,
      // 文件名稱
      filename: filename + '.html',
      // 頁面模板須要加對應的js腳本，若是不加這行則每一個頁面都會引入全部的js腳本
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}