自vite和vue3发布后,我就用他们作为主要的vue开发模式,但是今天需要把以前写的vue3的内容嵌套到一个自己编译的安卓webview中,但是去这个webview中集成esmodule是一件很麻烦的事情,所以我需要使用vite把vue3打包成非esmodule的方式,去让file协议能正常加载。
1 安装@vitejs/plugin-legacy
npm i @vitejs/plugin-legacy
2 配置vite.config.ts文件
import legacy from '@vitejs/plugin-legacy'
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
}),
uni()
],
3 打包之后
npm run build
4 修改打包后的文件
-
移除 <script type=module> 元素
-
移除其他 <script> 的 nomodule 属性
-
移除 <script id=vite-legacy-entry> 元素的内容,并把 data-src 属性名改为 src
得到这样一个标签
<script id="vite-legacy-entry" src="./assets/index-legacy.1b49367f.js"></script>
- 移除 SystemJS loader 代码(那个压缩到一行的 <script>)
一般都会携带async和 crossOrigin字样的那个标签,一般是第一个script引入,这行需要注释
4 进行测试
直接双击index.html,可以看到使用file协议正常运行了打包后的文件,并且没有跨域报错