一、如果你只是想对低版本浏览器进行兼容

直接使用官方提供的 @vitejs/plugin-legacy 插件即可。

参考官方文档：https://cn.vitejs.dev/guide/

【使用步骤】

1、安装插件

npm i @vitejs/plugin-legacy -D

2、修改vite.config.js

import { defineConfig } from 'vite';

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({   

    plugins: [

        legacy({ 

            targets: ['defaults', 'not IE 11']

        })

    ]

})

【注】

targets用于标明，你想兼容的浏览器版本范围。具体可配置项，详见：

https://github.com/browserslist/browserslist#queries

二、如果你只想打包出非esmoudle格式的资源文件，无论什么浏览器，都要用这种格式

先说结论：笔者翻阅网上各种资料，并未找到直接实现的方案，如有，辛苦留言指教，十分感谢！

整体解决方案，依然是基于 @vitejs/plugin-legacy，同时，额外对打包后得到的html进行手动处理，使得所有浏览器全部加载 legacy 版本的资源文件。

手动处理内容：

1）删除 script 标签里面的 nomodule，crossorigin 属性

2）删除 含有 type="module" 的 script 标签

3）删除 含有 rel="modulepreload" 的 link 标签

4）删除 id="vite-legacy-entry" 所在 script 标签里的所有内容，并将 data-src 属性换成 src

【实现步骤】

1、安装插件

npm i @vitejs/plugin-legacy -D

2、修改vite.config.js

import { defineConfig } from 'vite';

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({

    plugins: [legacy()]

})

3、创建自动格式化html的脚本

bin/htmlFormat.js

import fs from 'fs';

const htmlPath = './dist/index.html'; // 打包后的html文件路径

const htmlText = fs.readFileSync(htmlPath, 'utf8');

const htmlArr = htmlText.match(/.*\n/g) || [];

let result = '';

htmlArr.forEach((v) => {

  v = v

    .replace(/script ?nomodule\s?/g, 'script ')

    .replace(/\s?crossorigin\s?/g, ' ')

    .replace(/<link rel="modulepreload" href="[^"]+\.js">/g, '')

     .replace("System.import(document.getElementById('vite-legacy-entry').getAttribute('src'))", '')

    .replace(/data-src/g, 'src');

  if (!v.includes(`script type="module"`)) {

    result += v;

  }

});

fs.writeFileSync(htmlPath, result, 'utf8');

console.log('处理完成');

4、package.json创建 htmlFormat 脚本

"scripts": {

    "htmlFormat": "node ./bin/htmlFormat.js"

}    

5、执行 yarn build

6、执行 yarn htmlFormat

7、本地启动，验证能否正常访问

// 没有 serve 的，先执行 npm install -g serve。相关文档：https://github.com/vercel/serve

serve dist

访问 http://localhost:3000/，确认页面能否正常打开。同时，观察浏览器加载的静态资源包，如果包含 legacy 字样，则符合预期。

#参考文档：

https://blog.csdn.net/Wangyuan_wo/article/details/130648432

https://juejin.cn/post/7237782663936327737