自vite和vue3發(fā)布后，我就用他們作為主要的vue開發(fā)模式，但是今天需要把以前寫的vue3的內(nèi)容嵌套到一個自己編譯的安卓webview中，但是去這個webview中集成esmodule是一件很麻煩的事情，所以我需要使用vite把vue3打包成非esmodule的方式，去讓file協(xié)議能正常加載。

step1: 安裝 @vitejs/plugin-legacy

[@vitejs/plugin-legacy地址] @vitejs/plugin-legacy - npm (npmjs.com)

// npm安裝
npm i @vitejs/plugin-legacy

step2: 配置@vitejs/plugin-legacy相關內(nèi)容

在根目錄找到vite.config.ts(js)，并做如下修改

import legacy from '@vitejs/plugin-legacy';
plugins:[
  legacy({
    targets:['defaults','not IE 11']
    }),
   vue()],

step3: 進行打包

一般正常的項目直接build

step4: 修改打包后的文件

• 移除 <script type=module> 元素

• 移除其他 <script> 的 nomodule 屬性

• 移除 <script id=vite-legacy-entry> 元素的內(nèi)容，并把 data-src 屬性名改為 src

得到這樣一個標簽
<script id="vite-legacy-entry" src="./assets/index-legacy.1b49367f.js"></script>

• 移除 SystemJS loader 代碼（那個壓縮到一行的 <script>）

一般都會攜帶async和 crossOrigin字樣的那個標簽，一般是第一個script引入，這行需要注釋

step4: 進行測試

直接雙擊index.html，可以看到使用file協(xié)議正常運行了打包后的文件，并且沒有跨域報錯

img

作者：啥名都不好起

鏈接：http://www.itdecent.cn/p/d44d14bc5344

來源：簡書

著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。