修复 vitejs/plugin-legacy 不支持 CDN

修复 vitejs/plugin-legacy 不支持 CDN 的问题。

如何使用

安装

pnpm add @plugin-light/vite-plugin-legacy-polyfill -D

在 vite.config.ts 中添加如下设置：

import { defineConfig } from 'vite';
import { legacyPolyfillVitePlugin } from '@plugin-light/vite-plugin-legacy-polyfill';


export default defineConfig({
  plugins: [
    legacyPolyfillVitePlugin({
      base: process.env.VUE_APP_PUBLICPATH,
    })
  ],
});

原理

替换 index.html 的脚本文件，核心替换列表如下：

[
  {
    from: '<script nomodule crossorigin id="vite-legacy-polyfill" src="assets/polyfills-',
    to: `<script nomodule crossorigin id="vite-legacy-polyfill" src="${parsedBase}assets/polyfills-`,
  },
  {
    from: '<script nomodule crossorigin id="vite-legacy-entry" data-src="assets/index-',
    to: `<script nomodule crossorigin id="vite-legacy-entry" data-src="${parsedBase}assets/index-`,
  },
  {
    from: '<script type="module" crossorigin src="assets/polyfills-',
    to: `<script type="module" crossorigin src="${parsedBase}assets/polyfills-`,
  },
];

更新日志

点此查看