為什么需要多入口?

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

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

一.改造項目

將不同頁面的內(nèi)容分在不同的pages下,每個pages里的文件夾相當(dāng)于一個單體項目,單獨引入了main.ts和index.html,公共組件與utils等配置與原先不變

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

二.vite.config.ts配置

主要與多頁面相關(guān)的內(nèi)容

具體配置項可查閱vite文檔

1.root設(shè)置為src文件夾內(nèi)(項目入口)

2.envDir (檢測環(huán)境變量文件所在文件夾)

因為root設(shè)為了src所以需要../回到上一層,也可以把.env文件放到src內(nèi)

3.主要內(nèi)容是build.rollupOptions中input的配置

manange,detail,increase是配置的每一個頁面的html入口

增加了一個entry作為整個項目的入口index.html

同時在這個html文件中做了一個重定向

方便我們運行項目后打開3000端口直接跳到實際的入口

4.outDir與emptyOutDir選項

因為我們的項目root設(shè)為src文件夾里,所以設(shè)置outDir為../dist

返回上一級把打包生成的文件夾的位置放在項目文件夾下

emptyOutDir是因為默認只清空root下dist文件的內(nèi)容

設(shè)為true自己清空dist文件夾內(nèi)容

5.base的設(shè)置比較重要

直接關(guān)系到我們打包后的項目能否成功運行

這里使用'/'即可,打包完成后可以在編輯器打開dist文件夾

在每個入口的index.html里

ctrl+左鍵去訪問js,css資源,能夠訪問成功說明路徑正確

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

打包好的dist長這樣

三.部署

部署選擇的是nginx,我們將打包好的dist放在nginx的html目錄下,在conf文件里配置server,指定端口與location,root的路徑是放dist的位置

保存配置后重啟nginx即可訪問指定端口直接自動重定向到設(shè)置的入口

可以看到資源文件已經(jīng)都請求到了

總結(jié)

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

到此這篇關(guān)于Vite vue3多頁面入口打包以及部署踩坑的文章就介紹到這了,更多相關(guān)Vite vue3多頁面入口打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論