Vite+Vue项目的文件build产物通过file协议直接展示，方便cef、electron嵌入

一、需求

Vue写项目很快，但是有些客户端应用想要好看的界面需要利用Cef或electron进行Vue项目的H5界面渲染。Cef又能很好的支持C++的调用，非常方便，但是build产物一般都是网页上用的，有跨域同源测策略限制，同时file协议不支持es模块化（即使开启Cef的–allow-file-access-from-files也没用），于是，本文件章来展示如何利用插件帮助vite生成可直接浏览器访问的HTML文件。

二、方法

1、安装plugin-legacy插件,不同node版本对这个插件支持的情况不同，安装不上多试几个版本。

npm i @vitejs/plugin-legacy

https://www.npmjs.com/package/@vitejs/plugin-legacy?activeTab=versions
2、修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  base:'./',
  plugins: [
    legacy({
    targets:['defaults','not IE 11']
    }),
   vue()
   ],
})

3、运行build

npm run build

4、要想浏览器不不报错跨域请求还需要，替换修改产物中的index.html
手动找个编辑器替换下就行了，网上有些人写了脚本，也能用(注意是所有都要替换，包括标签体上的和标签内容)

replace("nomodule","");
replace("crossorigin","");
replace("data-src","src");