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

vue-cli3.0實(shí)現(xiàn)一個(gè)多頁面應(yīng)用的歷奇經(jīng)歷記錄總結(jié)

 更新時(shí)間:2020年03月16日 08:51:43   作者:wangliang_001  
這篇文章主要介紹了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁面應(yīng)用的歷奇經(jīng)歷,總結(jié)分析了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁面應(yīng)用遇到的問題與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(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ì)有所幫助。

相關(guān)文章

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

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

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