vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼
項(xiàng)目下載地址 vue-cli多頁(yè)面多路由項(xiàng)目示例 :vue+webpack+vue-router+vuex+mock+axios
Usage
This is a project template for vue-cli.
github上找到某大神的一個(gè)基于vue-cli模板的vueAdmin后臺(tái)管理的模板,根據(jù)項(xiàng)目需求改成一個(gè)多頁(yè)面多路由的vue項(xiàng)目。
PC端:后臺(tái)管理頁(yè)面,單獨(dú)的頁(yè)面入口,單獨(dú)的路由。
移動(dòng)端:業(yè)務(wù)展示頁(yè)面,單獨(dú)的頁(yè)面入口,單獨(dú)的路由。
踩了無(wú)數(shù)的坑,終于是初見效果了,隨后繼續(xù)優(yōu)化更新
Install
# install dependencies npm install # serve with hot reload at localhost:8088 npm run dev # build for production with minification npm run build
使用Nginx服務(wù)器進(jìn)行訪問(wèn),地址如下:
PC端 http://localhost/modules/index.html
移動(dòng)APP http://localhost/modules/index.html
多頁(yè)面配置
vue2.0版本多頁(yè)面入口,是由webpack配置來(lái)完成的,我的項(xiàng)目文件結(jié)構(gòu)如下
webpack |---build |---config |---dist |---route 路由 |---src |---api axios請(qǐng)求 |---assets 資源 |---common 公共js資源目錄 |---components組件 |---modules各個(gè)模塊 |---index index模塊 |---views 組件 |---index.html |---index.js |---index.vue |---phone phone模塊 |---phone.html |---phone.js |---phone.vue |---phone 組件
modules下為多個(gè)頁(yè)面入口,文件名稱保持一致,如:
modules |---index |---index.html |---index.js
.vue文件名稱任意。
原則上這些文件名稱都可以隨意定,但由于下面entry入口函數(shù)的限定,換成其他名字可以會(huì)找不到。如果想要起其他文件名,請(qǐng)相應(yīng)修改getMultiEntry()函數(shù)。
until.js
until.js中添加getMultiEntry(),依賴 glob插件,需要提前下載好,until.js開始引入
//獲取多級(jí)的入口文件 exports.getMultiEntry = function (globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-4); var pathsrc = tmp[0]+'/'+tmp[1]; if( tmp[0] == 'src' ){ pathsrc = tmp[1]; } //console.log(pathsrc) pathname = pathsrc + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; //console.log(pathname+'-----------'+entry); }); return entries; }
~\build\webpack.base.conf.js
找到entry,添加多入口
entry:entries,
運(yùn)行、編譯的時(shí)候每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)Chunk。 PS:終于明白這個(gè)chunk的含義了/(ㄒoㄒ)/~~
~\build\webpack.dev.conf.js
文末添加以下配置:
var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html'); for (var pathname in pages) { // 配置生成的html文件,定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 chunks: [pathname, 'vendors', 'manifest'], // 每個(gè)html引用的js模塊 inject: true // js插入位置 }; // 需要生成幾個(gè)html文件,就配置幾個(gè)HtmlWebpackPlugin對(duì)象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }
其中config.moduleName = 'modules'
~\build\webpack.prod.conf.js
... //構(gòu)建生成多頁(yè)面的HtmlWebpackPlugin配置,主要是循環(huán)生成 var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html'); for (var pathname in pages) { var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 chunks: ['vendor',pathname], // 每個(gè)html引用的js模塊 inject: true, // js插入位置 hash:true }; webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); } module.exports = webpackConfig
其中config.moduleName = 'modules'
至此,多頁(yè)面的配置已經(jīng)完成。訪問(wèn)地址為:
index : http://localhost:8088/modules/index.html
phone : http://localhost:8088/modules/phone.html
Browser Support
Modern browsers and Internet Explorer 10+.
snapshots
License
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI對(duì)table的指定列進(jìn)行合算
本文主要介紹了ElementUI對(duì)table的指定列進(jìn)行合算,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03使用VueRouter的addRoutes方法實(shí)現(xiàn)動(dòng)態(tài)添加用戶的權(quán)限路由
這篇文章主要介紹了使用VueRouter的addRoutes方法實(shí)現(xiàn)動(dòng)態(tài)添加用戶的權(quán)限路由,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06vue3源碼剖析之簡(jiǎn)單實(shí)現(xiàn)方法
源碼的重要性相信不用再多說(shuō)什么了吧,特別是用Vue 框架的,一般在面試的時(shí)候面試官多多少少都會(huì)考察源碼層面的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于vue3源碼剖析之簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-09-09Vue使用Axios進(jìn)行跨域請(qǐng)求的方法詳解
在開發(fā)現(xiàn)代?Web?應(yīng)用時(shí),前端和后端通常分離部署在不同的服務(wù)器上,這就會(huì)引發(fā)跨域請(qǐng)求問(wèn)題,所以本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中使用?Axios?發(fā)起跨域請(qǐng)求時(shí)解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2024-09-09Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04Vue使用自定義指令打開dialog的實(shí)現(xiàn)方法
在web后臺(tái)管理項(xiàng)目中,經(jīng)常要用到dialog,就vue來(lái)說(shuō),使用方式則是引入組件,注冊(cè),在template中使用,試想一下,如果我們需要在項(xiàng)目中的不同.vue文件中使用該dialog,但是又不想每次都在template中寫入組件該如何實(shí)現(xiàn)呢?本文我們介紹用指令控制dialog,需要的朋友可以參考下2024-07-07vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
這篇文章主要介紹了vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07