本文實(shí)例講述了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用的歷奇經(jīng)歷。分享給大家供大家參考，具體如下：

故事背景

這是在剛請(qǐng)完假回來(lái)，一切都在計(jì)劃之中，早上一來(lái)，就接到項(xiàng)目經(jīng)歷的新的需求（這個(gè)是爛攤子，已經(jīng)好幾個(gè)人接手，離職），我內(nèi)心是拒絕的，可最后辦法，沒(méi)有其他人去做，最后就落在了我頭上。

接到需求，先看了需求，跟以前的比起來(lái)，改動(dòng)挺大，數(shù)據(jù)結(jié)構(gòu)全改了，如果在原來(lái)的基礎(chǔ)上改，成本有點(diǎn)大，所以，就想著重啟項(xiàng)目來(lái)實(shí)現(xiàn)。于是就使用vue的最新腳手架工具vue-cli3.0來(lái)初始化項(xiàng)目，但突然，一個(gè)會(huì)議又來(lái)了，項(xiàng)目經(jīng)理，評(píng)估了工作，覺(jué)得另一個(gè)同事的工作量太大，于是又把后臺(tái)的一部分功能甩給我來(lái)實(shí)現(xiàn)，當(dāng)時(shí)內(nèi)心是mmp的。

本來(lái)項(xiàng)目是做的是單頁(yè)應(yīng)用，而新分配給我的功能，頁(yè)面也不多，功能也不算太復(fù)雜，就不想再單獨(dú)啟一個(gè)工程，就想著把這個(gè)功能，做在現(xiàn)有的工程里，但是呢，這是兩個(gè)完全沒(méi)有關(guān)聯(lián)的功能，于是乎，多頁(yè)面應(yīng)用在腦子中呼之欲出。

于是開(kāi)始了從單頁(yè)面應(yīng)用改造成多頁(yè)面應(yīng)用的過(guò)程。

一、初始化項(xiàng)目

使用vue3.0創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目默認(rèn)是單頁(yè)應(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è)應(yīng)用修改成多面應(yīng)用

1.（必選）在src文件下新增文件夾，每個(gè)文件夾代表一個(gè)獨(dú)立的頁(yè)面，文件夾里都含有App.vue,main.js,router.js文件

2.（必選）在src文件下新增配置文件vue.config.js

3.（可選）在src文件下新增文件store.js，可存儲(chǔ)數(shù)據(jù)，被每個(gè)獨(dú)立頁(yè)面都可取到

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è)頁(yè)面的入口，出口，模板文件，具體配置如下：

配置好后，直接通過(guò)npm run serve啟動(dòng)項(xiàng)目，發(fā)現(xiàn)一切正常，于是，就開(kāi)始愉快地編碼，打開(kāi)瀏覽器：http://192.168.0.28:8080/front，看效果：

一切都很完美，于是開(kāi)始打包，熟練地在命令行敲下 npm run build ， 看著進(jìn)度條一點(diǎn)點(diǎn)走著，內(nèi)心也是有點(diǎn)小激動(dòng)的，打包完成，看看打包目錄：

先利用http-server啟一個(gè)服務(wù)，然后去訪問(wèn)：http://192.168.0.28:8080/front.html
結(jié)果頁(yè)面空白？？？ 這是什么情況？

于是，我慢慢回想，發(fā)現(xiàn)了有點(diǎn)異常，在開(kāi)發(fā)環(huán)境，我訪問(wèn)是http://192.168.0.28:8080/front,而在http-server服務(wù)器上我訪問(wèn)是卻是http://192.168.0.28:8080/front.html。于是我將http-server上的地址改為http://192.168.0.28:8080/front， 結(jié)果卻是404.后來(lái)一想，這應(yīng)該是vue路由的模式為history導(dǎo)致，于是嘗試去改為hash, 發(fā)現(xiàn)也并不起作用，后來(lái)看文檔，發(fā)現(xiàn)vue-cli3.0開(kāi)發(fā)多頁(yè)面應(yīng)用，默認(rèn)為history模式。怎么辦呢，于是又想著從路由著手，將routes中的path改為xxx.html，實(shí)現(xiàn)代碼如下：

這下再通過(guò)http://192.168.0.28:8080/front.html去訪問(wèn)，可以了，哈哈，內(nèi)心有點(diǎn)小開(kāi)心，然后將打包后的代碼上傳，提交給后臺(tái)同學(xué)，讓其去集成。一集成，又出問(wèn)題啦，頁(yè)面又空白啦，一開(kāi)始腦子里想，是不是publicPath不對(duì)呀，但一看也沒(méi)問(wèn)題，我用的是相對(duì)路徑，請(qǐng)求也都發(fā)了，就是空白，后來(lái)，后臺(tái)的同學(xué)說(shuō)，將項(xiàng)目部署在根目錄下，就可以訪問(wèn)，我一聽(tīng)，想可能是路徑問(wèn)題，于是科在路由中加入了base選項(xiàng)，代碼如下：

再打包，給后臺(tái)同學(xué)集成，終于大功告成，通過(guò)這次經(jīng)歷，也算收獲頗多，故記錄下來(lái)，以共勉！

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。