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

Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問題的解決方案