emosheeep / vite-plugin-virtual-mpa

Out-of-box MPA plugin for Vite, generate multiple entries using only one template.
https://stackblitz.com/~/github.com/emosheeep/vite-plugin-virtual-mpa
MIT License
120 stars 15 forks source link

相對路徑打包後路徑位置不正確 #25

Closed wenyi420 closed 1 year ago

wenyi420 commented 1 year ago

首先感謝作者開發此套件 由於希望打包後 css 與 js 引入檔案的路徑是相對於 dist 的路徑,但當我於 defineConfig 使用 base="./" 打包出來的路徑不是期望的路徑。

打包後的資料結構: image

打包後 html 引入檔案的路徑: image

期望路徑為:<script type="module" crossorigin src="./js/index.js"></script> 實際路徑為:<script type="module" crossorigin src="../local/vite_mpa_de/js/index.js"></script>

而此問題也會造成使用 npm run preview 時,因為檔案引入路徑為 ../local/vite_mpa_de/js/index.js 而找不到檔案而無法預覽實際打包呈現。 image

麻煩作者了,謝謝~

emosheeep commented 1 year ago

这不是插件的问题,实际上你什么都不用配,默认的路径是 '/' 开头的,对应到产物里面是 /css/xxx.css, /js/xxx.js, 部署的时候这个 / 代表的就是根路径

wenyi420 commented 1 year ago

會有這個需求主要是因為在網頁內層放上 dist 打包的檔案後,如果使用默認的絕對位置 / 會抓不到檔案 因為 css 與 js 檔案是相對在 vite_mpa_demo 資料夾內,而不是根目錄內

Ex:http://example.com/vite_mpa_demo/index.html

emosheeep commented 1 year ago

这种情况下,应该配置 base,在打包的时候将 base 替换为对应的 cdn 路径,如果没有 cdn 路径,就是你的域名

wenyi420 commented 1 year ago

已解決~ 謝謝