Vite vue3多頁面入口打包及部署踩坑

---

theme: condensed-night-purple highlight: a11y-dark

---

為什麼需要多入口?

公司原生的移動端上需要用webview引入一些效能要求不高的H5頁面,初步考慮後選擇用vue試個水,前期頁面跳轉選擇使用vue-router,測試過程中在安卓高版本下右滑返回效果尚可,ios端初步嘗試使用的最左側touch事件移動距離檢測以及router判斷index新增過場動畫,但是整體的效果依然達不到下圖的效果.

原先專案中是使用多個html頁面以及原生自帶的協議去開啟html,跳轉是直接跳轉到另一個html頁面,就可以做個右滑返回時拖動的效果,所以專案最終選擇了打包成多頁面的方式

一.改造專案

將不同頁面的內容分在不同的pages下,每個pages裡的資料夾相當於一個單體專案,單獨引入了main.ts和index.html,公共元件與utils等配置與原先不變

要注意多頁面每個入口index.html的main.ts的src需要修改

二.vite.config.ts配置

主要與多頁面相關的內容
具體配置項可查閱vite文件
1.root設定為src資料夾內(專案入口)

2.envDir (檢測環境變數檔案所在資料夾)
因為root設為了src所以需要../回到上一層,也可以把.env檔案放到src內

3.主要內容是build.rollupOptions中input的配置

manange,detail,increase是配置的每一個頁面的html入口
增加了一個entry作為整個專案的入口index.html
同時在這個html檔案中做了一個重定向
方便我們執行專案後開啟3000埠直接跳到實際的入口

4.outDir與emptyOutDir選項
因為我們的專案root設為src資料夾裡,所以設定outDir為../dist
返回上一級把打包生成的資料夾的位置放在專案資料夾下
emptyOutDir是因為預設只清空root下dist檔案的內容
設為true自己清空dist資料夾內容

5.base的設定比較重要
直接關係到我們打包後的專案能否成功執行
這裡使用'/'即可,打包完成後可以在編輯器開啟dist資料夾
在每個入口的index.html裡
ctrl+左鍵去訪問js,css資源,能夠訪問成功說明路徑正確

這裡有個坑是我們必須用編輯器開啟dist資料夾,再去訪問js,css資源才能夠訪問到.起初我直接用live sever去開啟index.html引入資源時直接404了,可以看到打包後html頁面引用資源的路徑是/static/xxx,推測這裡的問題應該與相對路徑有關,有大佬知道的可以詳細說說

打包好的dist長這樣

三.部署

部署選擇的是nginx,我們將打包好的dist放在nginx的html目錄下,在conf檔案裡配置server,指定埠與location,root的路徑是放dist的位置

儲存配置後重啟nginx即可訪問指定埠直接自動重定向到設定的入口

可以看到資原始檔已經都請求到了

總結

多頁面入口的配置的思想其實就是每個入口html檔案配置單獨的main.ts與app.vue,同時每個main.ts裡實例化一個vue,類似於最開始學習vue時,在html頁面引入vuejs,然後每個html new一個vue,主要容易踩坑的地方就是引用的路徑問題.相對路徑這塊需要好好考慮.