本文介紹了vue-cli + webpack 多頁面實例配置優化方法，分享給大家

vue+webpack是否有多頁面

目前使用vue來做項目，估計大部分都是單頁面（SPA）應用，一個輕型的 MVVM 框架，誰用了MVVM框架，就再也回不去JQ時代了，哈哈。

在手機端的項目，使用vue + vue-router是high到爆，不僅僅是我們開發的而言，最主要的用戶體檢也是開足馬力，體檢感杠杠的。

那問題來了，使用vue+webpack的單頁面是爽到爆，那如果是多頁面也能不能high到爆呢？那當然呀，必須的必，vue、webpack的忠粉（哈哈，好像這忠粉不關系到多頁面的）。

在谷歌找vue 多頁面，實例還是比較少，功夫不負有心人，在yaoyao1987那找到了，具體可以到這個yaoyao1987 github，非常感謝yaoyao1987童鞋，今天要講的內容是基于yaoyao1987童鞋的多頁面實例上再優化的。

優化了點啥

github地址：https://github.com/bluefox1688/vue-cli-multi-page

優化的內容

我們先來講講，具體我們優化了什么內容。

增加全局統一使用的模塊Lib.js庫，可能這里看不明白，不要緊，后面會講到。 支持字體圖標 增加干凈的頁面、組件的模板，復制即可以使用。 去掉多余的代碼注釋，坑了我的注釋，別再坑人了 構建時，增加對css打包的支持 提取公共模塊........

使用方法

# 安裝npm install# 調試環境 serve with hot reload at http://localhost:8083/module/login.htmlnpm run dev# 生產環境 build for production with minificationnpm run build

本地默認訪問端口為8083，需要更改的童鞋請到項目根目錄文件config.js修改。

目錄結構

webpack |---build  |---src   |---assets 資源     |---css.css css     |---img 圖片文件     |---font/ 字體圖標   |---components 組件      |---Button.vue 按鈕組件     |---module-head.vue head組件   |---module各個頁面模塊    |---login  登陸模塊     |---login.html     |---login.js     |---app.vue    |---welcome    歡迎頁模塊     |---welcome.html     |---welcome.js     |---app.vue

從目錄結構上，各種組件、頁面模塊、資源等都按類新建了文件夾，方便我們儲存文件。

其實我們所有的文件，最主要都是放在module文件夾里，以文件夾名為html的名稱。

例如

 |---login  登陸模塊  |---login.html  |---login.js  |---app.vue

就是我們訪問時的地址：http://localhost:8083/module/login.html

這里一定要記住，在module里下級文件夾，一個文件夾就是一個html，js、vue template 都統一放在當前文件夾里，當然你也可以繼續放其他的資源，例如css、圖片等，webpack會打包到當前頁面里。