欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli3.0實現一個多頁面應用的歷奇經歷記錄總結

 更新時間:2020年03月16日 08:51:43   作者:wangliang_001  
這篇文章主要介紹了vue-cli3.0實現一個多頁面應用的歷奇經歷,總結分析了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項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案

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

    今天很郁悶,遇到這樣一個奇葩問題,使用webpack打包vue后,將打包好的文件,發(fā)布到Tomcat上,訪問成功,但是刷新后頁面報404錯誤,折騰半天才解決好,下面小編把Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案分享給大家,需要的朋友一起看看吧
    2018-05-05
  • 最新評論