快捷導(dǎo)航

Vite?vue3多頁(yè)面入口打包以及部署踩坑實(shí)戰(zhàn)

更新時(shí)間：2022年05月18日 10:57:01 作者：NorthMaple

因?yàn)槲覀児镜捻?xiàng)目是多頁(yè)面應(yīng)用,不同于傳統(tǒng)單頁(yè)面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁(yè)面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下

為什么需要多入口?

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

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

一.改造項(xiàng)目

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

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

二.vite.config.ts配置

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

具體配置項(xiàng)可查閱vite文檔

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

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

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

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

manange,detail,increase是配置的每一個(gè)頁(yè)面的html入口

增加了一個(gè)entry作為整個(gè)項(xiàng)目的入口index.html

同時(shí)在這個(gè)html文件中做了一個(gè)重定向

方便我們運(yùn)行項(xiàng)目后打開3000端口直接跳到實(shí)際的入口

4.outDir與emptyOutDir選項(xiàng)

因?yàn)槲覀兊捻?xiàng)目root設(shè)為src文件夾里,所以設(shè)置outDir為../dist

返回上一級(jí)把打包生成的文件夾的位置放在項(xiàng)目文件夾下

emptyOutDir是因?yàn)槟J(rèn)只清空root下dist文件的內(nèi)容

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

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

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

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

在每個(gè)入口的index.html里

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

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

打包好的dist長(zhǎng)這樣

三.部署

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

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

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

總結(jié)

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

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

您可能感興趣的文章: