vue-cli3.0實現一個多頁面應用的歷奇經歷記錄總結
本文實例講述了vue-cli3.0實現一個多頁面應用的歷奇經歷。分享給大家供大家參考,具體如下:
故事背景
這是在剛請完假回來,一切都在計劃之中,早上一來,就接到項目經歷的新的需求(這個是爛攤子,已經好幾個人接手,離職),我內心是拒絕的,可最后辦法,沒有其他人去做,最后就落在了我頭上。
接到需求,先看了需求,跟以前的比起來,改動挺大,數據結構全改了,如果在原來的基礎上改,成本有點大,所以,就想著重啟項目來實現。于是就使用vue的最新腳手架工具vue-cli3.0來初始化項目,但突然,一個會議又來了,項目經理,評估了工作,覺得另一個同事的工作量太大,于是又把后臺的一部分功能甩給我來實現,當時內心是mmp的。
本來項目是做的是單頁應用,而新分配給我的功能,頁面也不多,功能也不算太復雜,就不想再單獨啟一個工程,就想著把這個功能,做在現有的工程里,但是呢,這是兩個完全沒有關聯的功能,于是乎,多頁面應用在腦子中呼之欲出。
于是開始了從單頁面應用改造成多頁面應用的過程。
一、初始化項目
使用vue3.0創(chuà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
二、將單頁應用修改成多面應用
1.(必選)在src文件下新增文件夾,每個文件夾代表一個獨立的頁面,文件夾里都含有App.vue,main.js,router.js文件
2.(必選)在src文件下新增配置文件vue.config.js
3.(可選)在src文件下新增文件store.js,可存儲數據,被每個獨立頁面都可取到
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ā)現一切正常,于是,就開始愉快地編碼,打開瀏覽器:http://192.168.0.28:8080/front,看效果:
一切都很完美,于是開始打包,熟練地在命令行敲下 npm run build , 看著進度條一點點走著,內心也是有點小激動的,打包完成,看看打包目錄:
先利用http-server啟一個服務,然后去訪問:http://192.168.0.28:8080/front.html
結果頁面空白??? 這是什么情況?
于是,我慢慢回想,發(fā)現了有點異常,在開發(fā)環(huán)境,我訪問是http://192.168.0.28:8080/front,而在http-server服務器上我訪問是卻是http://192.168.0.28:8080/front.html。于是我將http-server上的地址改為http://192.168.0.28:8080/front, 結果卻是404.后來一想,這應該是vue路由的模式為history導致,于是嘗試去改為hash, 發(fā)現也并不起作用,后來看文檔,發(fā)現vue-cli3.0開發(fā)多頁面應用,默認為history模式。怎么辦呢,于是又想著從路由著手,將routes中的path改為xxx.html,實現代碼如下:
這下再通過http://192.168.0.28:8080/front.html去訪問,可以了,哈哈,內心有點小開心,然后將打包后的代碼上傳,提交給后臺同學,讓其去集成。一集成,又出問題啦,頁面又空白啦,一開始腦子里想,是不是publicPath不對呀,但一看也沒問題,我用的是相對路徑,請求也都發(fā)了,就是空白,后來,后臺的同學說,將項目部署在根目錄下,就可以訪問,我一聽,想可能是路徑問題,于是科在路由中加入了base選項,代碼如下:
再打包,給后臺同學集成,終于大功告成,通過這次經歷,也算收獲頗多,故記錄下來,以共勉!
希望本文所述對大家vue.js程序設計有所幫助。
- 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如何構建功能完善的前端架子
- 如何基于vue-cli3.0構建功能完善的移動端架子
- 詳解在vue-cli3.0中自定css、js和圖片的打包路徑
- 使用Vue-cli3.0創(chuàng)建的項目 如何發(fā)布npm包
相關文章
vue3項目導入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13
這篇文章主要給大家介紹了關于vue3項目導入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13)的解決辦法,文中將解決辦法介紹的非常詳細,需要的朋友可以參考下2024-01-01

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