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 }

6.修改build/weback.base.conf.js的入口配置

改成

7.修改build/webpack.dev.conf.js(開發環境)和build/webpack.prod.conf.js(生產環境)的多頁面配置

修改build/webpack.dev.conf.js

修改build/webpack.prod.conf.js

在後邊加上

到這裏對頁面應用的配置就完成了

而後npm run dev 打開開發環境,在路徑中輸入home.html若是能進入home 頁面,那麼多頁面應用的配置就成功了

相關文章
相關標籤/搜索