Vite 2 + Vue 3 打包生成的index.html直接在浏览器打开会报跨域的错误

Vite 默认输出 <script type=module>,也就是 ES Modules,它是不支持文件系统访问的,需要使用一个 HTTP 服务器来提供脚本文件(也就是错误日志中说的,需要 http/https 的 scheme)。

vite介绍的如下

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。

或者,你可以在原生应用注入自定义 scheme 来使用内嵌页面(example-app:// 什么的),这样可以正常激活 ES Modules 特性,从一开始规避这个问题。

如果你实在希望使用 Vite 做开发,同时只能使用 file:///,可以使用 @vitejs/plugin-legacy 32 生成 nomodule 的版本,然后对 dist/index.html 做如下改动:

移除 <script type=module> 元素
移除其他 <script> 的 nomodule 属性
移除 <script id=vite-legacy-entry> 元素的内容,并把 data-src 属性名改为 src
移除 SystemJS loader 代码(那个压缩到一行的 <script>)
修改所有资源地址为相对地址(例如把 /assets/index-legacy.xxxx.js 改为 ./assets/index-legacy.xxxx.js,注意还有 CSS 文件)```

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!