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 頁面,那麼多頁面應用的配置就成功了