vite + vue3 打包的文件，如果使用类似于nginx或者其他的服务器打开，可以正常打开，但如果直接点击打开index.html文件，页面会白屏，打开调试工具后发现如下跨域的报错。
这是因为打包后并不支持file引用协议。这就给混合式开发等时候带来困扰，因为在这种场景下，是有需要直接打开index.html文件的需求的。
1 安装兼容插件 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy -D
2 在vite.config.ts 中进行配置
// 引入@vitejs/plugin-legacy
import { defineConfig} from 'vite'
import legacy from '@vitejs/plugin-legacy';
// 在plugins中添加
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
}),
vue()
],
base：'./'
})
3 手动修改打包完的index.html文件（不建议使用，可直接略过使用第4步）
先执行 npm run build 命令进行打包，打包完成后打开 dist/index.html。将index.html中所有的 <script></script> 标签中的 type="module"、crossorigin、nomodule 删除。
举例
修改前
……
<script type="module" crossorigin src="./assets/index.5617d2f4.js"></script>
<script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy.7fa4d18d.js"></script>
……
修改后
<script src="./assets/index.5617d2f4.js"></script>
<script id="vite-legacy-polyfill" src="./assets/polyfills-legacy.7fa4d18d.js"></script>
4.自动修改打包完的index.html文件（建议使用）
实现的就是将需要手动的变成自动的，如果每次打完包之后都要像第二步那样手动更改，那太麻烦了，太不符合程序员的风格了。自动化的话，最简单的方式就是将原本符合条件的引用中需要保留的（src地址、标签内部的js），重新创建一个引用标签，重新引用。这样做，虽然页面打开的时候还会报错，页面会自动处理相关的错误的标签引用，在处理完毕后，页面会正常显现。在项目的根目录下的index.html文件中的尾部添加新的来处理，一定要添加在尾部。
<script>
(function (win) {
// 获取页面所有的 <script > 标签对象
let scripts = document.getElementsByTagName('script')
// 遍历标签
for(let i = 0; i < scripts.length; i++) {
// 提取单个<script > 标签对象
let script = scripts[i]
// 获取标签中的 src
let url = script.getAttribute("src")
// 获取标签中的 type
let type = script.getAttribute("type")
// 获取标签中的js代码
let scriptText = script.innerHTML
// 如果有引用地址或者 type 属性 为 "module" 则代表该标签需要更改
if (url || type === "module") {
// 创建一个新的标签对象
let tag=document.createElement('script');
// 设置src的引入
tag.setAttribute('url',url);
// 设置js代码
tag.innerHTML = scriptText
// 删除原先的标签
script.remove()
// 将标签添加到代码中
document.getElementsByTagName('head')[0].appendChild(tag)
}
}
})(window)
</script>
就可以正常双击打开打包完的index.html运行项目了。
5 其它问题
5.1 vue3 打包项目时报错
解决方案
npm install terser -D
