自vite和vue3發(fā)布后碴萧，我就用他們作為主要的vue開發(fā)模式，但是今天需要把以前寫的vue3的內(nèi)容嵌套到一個自己編譯的安卓webview中末购，但是去這個webview中集成esmodule是一件很麻煩的事情破喻，所以我需要使用vite把vue3打包成非esmodule的方式，去讓file協(xié)議能正常加載盟榴。
step1: 安裝 @vitejs/plugin-legacy
[@vitejs/plugin-legacy地址] https://github.com/vitejs/vite/tree/main/packages/plugin-legacy)
step2: 配置@vitejs/plugin-legacy相關(guān)內(nèi)容
在根目錄找到vite.config.ts(js)曹质，并做如下修改
import legacy from '@vitejs/plugin-legacy';
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
}),
vue()
],
step3: 進(jìn)行打包
一般正常的項目直接build
step4: 修改打包后的文件
移除 <script type=module> 元素移除其他 <script> 的 nomodule 屬性移除 <script id=vite-legacy-entry> 元素的內(nèi)容，并把 data-src 屬性名改為 src
得到這樣一個標(biāo)簽
<script id="vite-legacy-entry" src="./assets/index-legacy.1b49367f.js"></script>
移除 SystemJS loader 代碼（那個壓縮到一行的 <script>）
一般都會攜帶async 和 crossOrigin字樣的那個標(biāo)簽擎场，一般是第一個script引入羽德，這行需要注釋
step4: 進(jìn)行測試
直接雙擊index.html，可以看到使用file協(xié)議正常運(yùn)行了打包后的文件迅办，并且沒有跨域報錯
image.png
last
目前沒有發(fā)現(xiàn)這個方法有什么問題宅静，如果小伙伴們在使用過程中有什么問題，歡迎留言討論~
