vue構建多頁面應用例項程式碼分享
最近一直在研究使用vue做出來一些東西,但都是SPA的單頁面應用,但實際工作中,單頁面並不一定符合業務需求,所以這篇我就來說說怎麼開發多頁面的Vue應用,以及在這個過程會遇到的問題。本文主要和大家介紹用vue構建多頁面應用的示例程式碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能幫助到大家。
這是我放在GitHub上的專案,裡面有整個配置檔案,可以參看一下:multiple-vue-page
準備工作
在本地用vue-cli新建一個專案,這個步驟vue的官網上有,我就不再說了。
這裡有一個地方需要改一下,在執行npm install命令之前,在package.json裡新增一個依賴,後面會用到。
修改webpack配置
這裡展示一下我的專案目錄
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
在這一步裡我們需要改動的檔案都在build檔案下,分別是:
-
utils.js
-
webpack.base.conf.js
-
webpack.dev.conf.js
-
webpack.prod.conf.js
我就按照順序放出完整的檔案內容,然後在做修改或新增的位置用註釋符標註出來:
utils.js檔案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
|
webpack.base.conf.js 檔案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
|
webpack.dev.conf.js 檔案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
|
webpack.prod.conf.js 檔案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
|
至此,webpack的配置就結束了。
但是還沒完啦,下面繼續。
檔案結構
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
src就是我所使用的工程檔案了,assets,components,pages分別是靜態資原始檔、元件檔案、頁面檔案。
前兩個就不多說,主要是頁面檔案裡,我目前是按照專案的模組分的資料夾,你也可以按照你自己的需求調整。然後在每個模組裡又有三個內容:vue檔案,js檔案和html檔案。這三個檔案的作用就相當於做spa單頁面應用時,根目錄的index.html頁面模板,src檔案下的main.js和app.vue的功能。
原先,入口檔案只有一個main.js,但現在由於是多頁面,因此入口頁面多了,我目前就是兩個:index和cell,之後如果打包,就會在dist檔案下生成兩個HTML檔案:index.html和cell.html(可以參考一下單頁面應用時,打包只會生成一個index.html,區別在這裡)。
cell檔案下的三個檔案,就是一般模式的配置,參考index的就可以,但並不完全相同。
特別注意的地方
cell.js
在這個檔案裡,按照寫法,應該是這樣的吧:
1 2 3 4 5 6 7 8 |
|
這個配置在執行時(npm run dev)會報錯
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
網上的解釋是這樣的:
執行時構建不包含模板編譯器,因此不支援 template 選項,只能用 render 選項,但即使使用執行時構建,在單檔案元件中也依然可以寫模板,因為單檔案元件的模板會在構建時預編譯為 render 函式。執行時構建比獨立構建要輕量30%,只有 17.14 Kb min+gzip大小。
上面一段是官方api中的解釋。就是說,如果我們想使用template,我們不能直接在客戶端使用npm install之後的vue。
也給出了相應的修改方案:
1 |
|
這裡是修改package.json的resolve下的vue的配置,很多人反應這樣修改之後就好了,但是我按照這個方法修改之後依然報錯。然後我就想到上面提到的render函式,因此我的修改是針對cell.js檔案的。
1 2 3 4 5 6 7 8 |
|
這裡面我用render函式取代了元件的寫法,在執行就沒問題了。
頁面跳轉
既然是多頁面,肯定涉及頁面之間的互相跳轉,就按照我這個專案舉例,從index.html檔案點選a標籤跳轉到cell.html。
我最開始寫的是:
1 2 |
|
但這樣寫,不論是在開發環境還是最後測試,都會報404,找不到這個頁面。
改成這樣既可:
1 2 |
|
這樣他就會自己找cell.html這個檔案。
打包後的資源路徑
執行npm run build之後,開啟相應的html檔案你是看不到任何東西的,檢視原因是找不到相應的js檔案和css檔案。
這時候的檔案結構是這樣的:
1 2 3 4 5 |
|
檢視index.html檔案之後會發現資源的引用路徑是:
/dist/js.........
這樣,如果你的dist檔案不是在根目錄下的,就根本找不到資源。
方法當然也有啦,如果你不嫌麻煩,就一個檔案一個檔案的修改路徑咯,或者像我一樣偷懶,修改config下的index.js檔案。具體的做法是:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
將這裡面的
1 |
|
改成
1 |
|
醬紫,配置檔案資源的時候找到的就是相對路徑下的資源了,在重新npm run build看看吧。