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

vite.config.js 配置

export default {
  base: './'
  // ...
}

通过 vite 打包生成的静态资源,从本地文件系统直接访问 index.html, 页面打开空白,控制台报错:

通过 vue-cli 创建的项目进行同样的配置,打包生成的就能直接访问,没问题

@silentdepth

使用 npm init @vitejs/app 创建最简单的项目就能复现

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

对于那种嵌入式应用,比如H5页面嵌原生底座的混合开发模式,不就是从文件系统访问吗,这种情况要怎么弄。

那我建议你换别的 bundler。Vite 没有为传统模块系统设计,ES Modules 是其特性基线。

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

如果你实在希望使用 Vite 做开发,同时只能使用 file:///,可以使用 @vitejs/plugin-legacy 生成 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 文件)

我没有这么实践过,不确定所有功能都是正常的,建议部署前充分测试。

多谢,我还是换回@vue/cli吧

这是正道,欢迎回到正道上来