vue3-MPA sample

紀錄一下使用 vite.js 新建專案後,要怎麼從 SPA 改 MPA,請注意目前此練習還有 BUG,無法透過填入網址直接瀏覽正確路由的頁面,僅能透過網頁 UI 操作。

其實東西不多,不過自己要查的話會花很多時間,少用的話又不會記得,所以乾脆紀錄一下,基本的東西就不說了,直接上程式

目錄結構

  1. components 放共用元件等等,預計是放全站共用的東西,如 UI componentLayout component
  2. pages 放各個獨立的SPA進入點相關檔案,其子目錄下可自行再增設 components 目錄,存放該SPA自己用的元件

vite.config.js 設定

vite.js 打包透過 rollup 處理,設定內有提供對接的設定值,整份設定檔請參閱下方程式碼註解說明

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
import { resolve } from "path"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

// 所有頁面進入點都放在 /src/pages 底下
const root = resolve(__dirname, "src", "pages")
// 編譯輸出檔案放在 /dist
const outputDir = resolve(__dirname, "dist")

// https://vitejs.dev/config/
export default defineConfig({
// 重新指定index.html所在的根目錄
root,
plugins: [vue()],
build: {
outDir: outputDir,
// vite.js 透過 rollup 打包,此處可自定義底層的 rollup 打包設定
rollupOptions: {
// 網站入口點設定
// ref:https://rollupjs.org/configuration-options/#input
input: {
// 網站的超連結路徑必須要加上尾巴的"/",如 <a href="/monster/">monster</a>
home: resolve(root, "index.html"),
monster: resolve(root, "monster", "index.html"),
about: resolve(root, "about", "index.html"),
},
},
},
resolve: {
// 此處定義路徑替換的別名
alias: {
"@": resolve(__dirname, "src"),
},
},
})

後記

查詢網路上要做 vite-mpa 好像很多方式都是說要新增套件,但我覺得官網既然說可以做到,應該是不需要用到套件,所以我就沒有查這方面相關的資訊了,事實證明好像也不用,只是在很多地方感覺好像還是可以更友善一點,或許套件就是能夠幫忙處理這些細節的部分吧,無論如何,這只是第一次測試MPA的POC,順便記錄起來,未來可能會有更合適的做法那就再說了。

補充

此練習到最後有發現一個致命的問題,也就是透過網址進入網站的話,並不會進入到正確的路由。簡單的說就是瀏覽網站到一半,重新整理頁面會發現回到首頁去了,目前沒有找到此問題的解決方案,所以後續還是會從 SPA 加上動態載入元件的方向著手,這篇文章就存查紀錄用吧