使用vite把vue3打包成非esmodule的方式，去让file协议能正常加载

自vite和vue3发布后，我就用他们作为主要的vue开发模式，但是今天需要把以前写的vue3的内容嵌套到一个自己编译的安卓webview中，但是去这个webview中集成esmodule是一件很麻烦的事情，所以我需要使用vite把vue3打包成非esmodule的方式，去让file协议能正常加载。

step1: 安装 @vitejs/plugin-legacy

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

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

step2: 配置@vitejs/plugin-legacy相关内容

在根目录找到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> 元素的内容，并把 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协议正常运行了打包后的文件，并且没有跨域报错

img

作者：啥名都不好起

链接：https://www.jianshu.com/p/d44d14bc5344

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。