Vite构建后dist目录HTML出现CORS跨域错误，如何解决？

• 问题原因：Vite默认配置的base为根路径/，直接用浏览器打开本地file://协议的HTML时，资源的绝对路径会触发浏览器的CORS跨域限制，导致脚本加载被拦截。

• 解决步骤：

  1. 打开项目根目录下的vite.config.js（或vite.config.ts），修改base配置为相对路径：

     export default {
       base: './'
     }
     

  2. 重新执行构建命令：

     npm run build
     

  此时生成的dist文件夹中，所有资源路径都会改为相对当前HTML文件的路径，直接用浏览器打开HTML就能正常加载资源，不会触发CORS错误。

• 额外说明：如果后续要部署到服务器，可根据实际部署的子路径调整base值，比如部署到https://your-domain.com/my-app/，就设置base: '/my-app/'。

内容的提问来源于stack exchange，提问作者Ali Kerimov