本文例項講述了vue-cli3.0實現一個多頁面應用的歷奇經歷。分享給大家供大家參考，具體如下：

故事背景

這是在剛請完假回來，一切都在計劃之中，早上一來，就接到專案經歷的新的需求（這個是爛攤子，已經好幾個人接手，離職），我內心是拒絕的，可最後辦法，沒有其他人去做，最後就落在了我頭上。

接到需求，先看了需求，跟以前的比起來，改動挺大，資料結構全改了，如果在原來的基礎上改，成本有點大，所以，就想著重啟專案來實現。於是就使用vue的最新腳手架工具vue-cli3.0來初始化專案，但突然，一個會議又來了，專案經理，評估了工作，覺得另一個同事的工作量太大，於是又把後臺的一部分功能甩給我來實現，當時內心是mmp的。

本來專案是做的是單頁應用，而新分配給我的功能，頁面也不多，功能也不算太複雜，就不想再單獨啟一個工程，就想著把這個功能，做在現有的工程裡，但是呢，這是兩個完全沒有關聯的功能，於是乎，多頁面應用在腦子中呼之欲出。

於是開始了從單頁面應用改造成多頁面應用的過程。

一、初始化專案

使用vue3.0建立一個專案，專案預設是單頁應用，目錄如下：

|-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啟動專案，發現一切正常，於是，就開始愉快地編碼，開啟瀏覽器：http://192.168.0.28:8080/front，看效果：

一切都很完美，於是開始打包，熟練地在命令列敲下 npm run build ， 看著進度條一點點走著，內心也是有點小激動的，打包完成，看看打包目錄：

先利用http-server啟一個服務，然後去訪問：http://192.168.0.28:8080/front.html
結果頁面空白？？？ 這是什麼情況？

於是，我慢慢回想，發現了有點異常，在開發環境，我訪問是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,發現也並不起作用，後來看文件，發現vue-cli3.0開發多頁面應用，預設為history模式。怎麼辦呢，於是又想著從路由著手，將routes中的path改為xxx.html，實現程式碼如下：

這下再通過http://192.168.0.28:8080/front.html去訪問，可以了，哈哈，內心有點小開心，然後將打包後的程式碼上傳，提交給後臺同學，讓其去整合。一整合，又出問題啦，頁面又空白啦，一開始腦子裡想，是不是publicPath不對呀，但一看也沒問題，我用的是相對路徑，請求也都發了，就是空白，後來，後臺的同學說，將專案部署在根目錄下，就可以訪問，我一聽，想可能是路徑問題，於是科在路由中加入了base選項，程式碼如下：

再打包，給後臺同學整合，終於大功告成，通過這次經歷，也算收穫頗多，故記錄下來，以共勉！

希望本文所述對大家vue.js程式設計有所幫助。