vue-cli3.0實現(xiàn)一個多頁面應(yīng)用的歷奇經(jīng)歷記錄總結(jié)
本文實例講述了vue-cli3.0實現(xiàn)一個多頁面應(yīng)用的歷奇經(jīng)歷。分享給大家供大家參考,具體如下:
故事背景
這是在剛請完假回來,一切都在計劃之中,早上一來,就接到項目經(jīng)歷的新的需求(這個是爛攤子,已經(jīng)好幾個人接手,離職),我內(nèi)心是拒絕的,可最后辦法,沒有其他人去做,最后就落在了我頭上。
接到需求,先看了需求,跟以前的比起來,改動挺大,數(shù)據(jù)結(jié)構(gòu)全改了,如果在原來的基礎(chǔ)上改,成本有點大,所以,就想著重啟項目來實現(xiàn)。于是就使用vue的最新腳手架工具vue-cli3.0來初始化項目,但突然,一個會議又來了,項目經(jīng)理,評估了工作,覺得另一個同事的工作量太大,于是又把后臺的一部分功能甩給我來實現(xiàn),當(dāng)時內(nèi)心是mmp的。
本來項目是做的是單頁應(yīng)用,而新分配給我的功能,頁面也不多,功能也不算太復(fù)雜,就不想再單獨啟一個工程,就想著把這個功能,做在現(xiàn)有的工程里,但是呢,這是兩個完全沒有關(guān)聯(lián)的功能,于是乎,多頁面應(yīng)用在腦子中呼之欲出。
于是開始了從單頁面應(yīng)用改造成多頁面應(yīng)用的過程。
一、初始化項目
使用vue3.0創(chuàng)建一個項目,項目默認是單頁應(yīng)用,目錄如下:
|-node_modules |-public |-favicon.ico |-index.html |-src |-assets |-components |-store |-views |-App.vue |-main.js |-.browserslistrc |-.env.development |-.env.production |-.eslintrc.js |-.gitignore |-.prettierrc.js |-babel.config.js |-package.json
二、將單頁應(yīng)用修改成多面應(yīng)用
1.(必選)在src文件下新增文件夾,每個文件夾代表一個獨立的頁面,文件夾里都含有App.vue,main.js,router.js文件
2.(必選)在src文件下新增配置文件vue.config.js
3.(可選)在src文件下新增文件store.js,可存儲數(shù)據(jù),被每個獨立頁面都可取到
4.(可選)刪除原先src文件下的App.vue,main.js文件
————————————————
最終文件目錄如下:
|-node_modules |-public |-favicon.ico |-index.html |-src |-api |-assets |-components |-store |-styles |-utils |-views |-admin |-App.vue |-main.js |-index.vue |-router.js |-front |-App.vue |-main.js |-index.vue |-router.js |-.browserslistrc |-.env.development |-.env.production |-.eslintrc.js |-.gitignore |-.prettierrc.js |-babel.config.js |-package.json |-vue.config.js
三、配置vue.config.js
在該文件下添加每個頁面的入口,出口,模板文件,具體配置如下:
配置好后,直接通過npm run serve
啟動項目,發(fā)現(xiàn)一切正常,于是,就開始愉快地編碼,打開瀏覽器:http://192.168.0.28:8080/front,看效果:
一切都很完美,于是開始打包,熟練地在命令行敲下 npm run build , 看著進度條一點點走著,內(nèi)心也是有點小激動的,打包完成,看看打包目錄:
先利用http-server啟一個服務(wù),然后去訪問:http://192.168.0.28:8080/front.html
結(jié)果頁面空白??? 這是什么情況?
于是,我慢慢回想,發(fā)現(xiàn)了有點異常,在開發(fā)環(huán)境,我訪問是http://192.168.0.28:8080/front,而在http-server服務(wù)器上我訪問是卻是http://192.168.0.28:8080/front.html。于是我將http-server上的地址改為http://192.168.0.28:8080/front, 結(jié)果卻是404.后來一想,這應(yīng)該是vue路由的模式為history導(dǎo)致,于是嘗試去改為hash, 發(fā)現(xiàn)也并不起作用,后來看文檔,發(fā)現(xiàn)vue-cli3.0開發(fā)多頁面應(yīng)用,默認為history模式。怎么辦呢,于是又想著從路由著手,將routes中的path改為xxx.html,實現(xiàn)代碼如下:
這下再通過http://192.168.0.28:8080/front.html去訪問,可以了,哈哈,內(nèi)心有點小開心,然后將打包后的代碼上傳,提交給后臺同學(xué),讓其去集成。一集成,又出問題啦,頁面又空白啦,一開始腦子里想,是不是publicPath不對呀,但一看也沒問題,我用的是相對路徑,請求也都發(fā)了,就是空白,后來,后臺的同學(xué)說,將項目部署在根目錄下,就可以訪問,我一聽,想可能是路徑問題,于是科在路由中加入了base選項,代碼如下:
再打包,給后臺同學(xué)集成,終于大功告成,通過這次經(jīng)歷,也算收獲頗多,故記錄下來,以共勉!
希望本文所述對大家vue.js程序設(shè)計有所幫助。
- vue-cli3.0 特性解讀
- 詳解如何配置vue-cli3.0的vue.config.js
- 一份超級詳細的Vue-cli3.0使用教程【推薦】
- vue-cli3.0使用及部分配置詳解
- vue-cli3.0 腳手架搭建項目的過程詳解
- vue-cli3.0配置及使用注意事項詳解
- vue-cli3.0+element-ui上傳組件el-upload的使用
- vue-cli3.0 環(huán)境變量與模式配置方法
- 詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子
- 如何基于vue-cli3.0構(gòu)建功能完善的移動端架子
- 詳解在vue-cli3.0中自定css、js和圖片的打包路徑
- 使用Vue-cli3.0創(chuàng)建的項目 如何發(fā)布npm包
相關(guān)文章
vue3項目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13
這篇文章主要給大家介紹了關(guān)于vue3項目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13)的解決辦法,文中將解決辦法介紹的非常詳細,需要的朋友可以參考下2024-01-01Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖
這篇文章主要為大家詳細介紹了Vue中如何使用echarts實現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中,setup?中提供了?defineExpose()?方法,該方法可以將組件內(nèi)部的方法暴露給父組件,這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10

Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案