vite打包vue3后如何直接在浏览器打开(非ESModule)

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

step1: 安装 @vitejs/plugin-legacy

[@vitejs/plugin-legacy地址] https://github.com/vitejs/vite/tree/main/packages/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: 修改打包后的文件

  • 移除
    • 移除 SystemJS loader 代码(那个压缩到一行的

共有 0 条评论

沙发空余